将粗体(布尔值)添加到 Material-ui(反应)
Adding bold (boolean) to Material-ui (raect)
我有一个来自 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>
),
错误
Property 'Title1' does not exist on type 'IProps'.
Property 'Title1' does not exist on type 'IBold'.ts(2339)
希望我写得好...
谢谢!
我解决了。
我将 IText
接口添加到 IBold
接口。
像这样:
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>,
//...
我有一个来自 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>
),
错误
Property 'Title1' does not exist on type 'IProps'. Property 'Title1' does not exist on type 'IBold'.ts(2339)
希望我写得好... 谢谢!
我解决了。
我将 IText
接口添加到 IBold
接口。
像这样:
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>,
//...