如何使用 Material 设计在 React 中指定文本颜色

Question

我的问题其实很简单，但是看了Material设计文档后，我不太明白如何指定文本的颜色。

我有一个名为“简介”的组件我想应用某种排版颜色

const useStyles = makeStyles({
    root: {
        width: '100%',
        maxWidth: 500,
    },
});

export default function Introduction() {
    const classes = useStyles();
    return(
        <div className={classes.root}>
            <Typography variant="h5" gutterBottom>Welcome to JavaScript</Typography>
        </div>
    );
}

我知道可以应用这种方法。

<Typography style={{color: "red"}} variant="h5" gutterBottom>JavaScript</Typography>

或指定类名，但我想知道如何使用Material设计

指定任何颜色

我也尝试过对文本使用粗细，但它不起作用

<Typography fontWeight={900} variant="h5" gutterBottom>JavaScript</Typography>

Answer 1

如果您使用的是最新的@material-ui/core，您需要根据文档将文本包含在一个 Box 标签中并为其设置 fonWeight

<Typography style={{ color: "red" }} variant="h5" gutterBottom>
    <Box fontWeight={900}>JavaScript</Box>
</Typography>

如何使用 Material 设计在 React 中指定文本颜色

How to specify text color in React using Material Design

javascript

css

reactjs

material-design