时间戳

首页 > 解决方案 > 如何使用 Material Design 在 React 中指定文本颜色

javascript - 如何使用 Material Design 在 React 中指定文本颜色

问题描述

我的问题实际上很简单，但是在查看了 Material Design 文档之后，我不太明白如何为文本指定颜色。

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

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>

或指定className，但我想知道如何使用Material Design 指定任何颜色

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

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

标签： javascriptcssreactjsmaterial-design

解决方案

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

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

推荐阅读