将粗体（布尔值）添加到 Material-ui（反应）答案

【问题标题】：Adding bold (boolean) to Material-ui (raect)将粗体（布尔值）添加到 Material-ui（反应）
【发布时间】：2021-07-20 21:03:11
【问题描述】：

我有一个来自 Material-UI (MUI) 的排版组件，我需要添加一个粗体选项（类型为布尔值）。

我的排版组件

import React, { FC } from 'react';
import Typo from '@material-ui/core/Typography';

interface IText {
  [property: string]: FC;
}

// for styles of each variant - see 'theme.ts'
const Typography: IText = {
  Title1: ({ children }) => (
    <Typo variant="subtitle1" component="h2">
      {children}
    </Typo>
  ),
  Title2: ({ children }) => (
    <Typo variant="subtitle2" component="h3">
      {children}
    </Typo>
  ),
//....More like this below......
};
export default Typography;

我像这样使用它（在我的其他组件中）： <Typography.Title1>/*...Some code here...*/</Typography.Title1> 我想像这样添加粗体： <Typography.Title1 bold>/*...Some code here...*/</Typography.Title1>，文字会加粗。

我试过这个来添加一个界面，但我在使用排版的每个组件中都遇到了错误...

interface IText {
  [property: string]: FC;
}
interface IBold {
  bold?: boolean;
}

type IProps = IText | IBold;

const style = { fontWeight: 'bold' };

// for styles of each variant - see 'theme.ts'
const Typography: IProps = {
  Title1: ({ children }, bold) => (
    <Typo style={bold && style} variant="subtitle1" component="h2">
      {children}
    </Typo>
  ),

错误

类型“IProps”上不存在属性“Title1”。类型 'IBold'.ts(2339) 上不存在属性 'Title1'

希望我写的好... 谢谢！

【问题讨论】：

标签： reactjs material-ui components bold

【解决方案1】：

我解决了。我将IBold 接口添加到IText 接口。

像这样：

interface IText {
  [property: string]: FC<IBold>;
}
//....
const Typography: IText = {
  Title1: ({ children }, bold) => (
    <Typo style={bold && style} variant="subtitle1" component="h2">
      {children}
    </Typo>
  ),
//....

然后，从使用的组件：

<Typography.Title1 bold={true}>
        //Some code
 </Typography.Title1>,
//...

【讨论】：