Material UI 的常规类名

Question

我已经阅读了一些类似问题的答案，但由于 materialUI 更新而没有完全理解，其中 @mui/styles 被删除了。

根据 mui 文档，我们可以使用 sx prop 创建自定义样式，像这样

 <Typography variant="h5" sx={{backgroundColor: 'red' }}>Header</Typography>

但是当我在 v5 中使用常规类名时它也能正常工作：

//css

.makeRed {
backgroundColor: red
}
 
// jsx
<Typography variant="h5" className="makeRed">Header</Typography>

问题是 - 使用正则类是否有缺陷，我需要重写 mui 类？

（昨天开始了我的mUI之旅）

Answer 1

我一直在复习 Material 的新工作，我发现如果你想让事情更容易改变并且运行更快，你将通过框架工作. Material 的目的是为了增强可重用性，因此您将希望以此为目标，并使您在应用程序中所做的每件事的风格都保持一致。

如果你最好的选择是：

const useStyles = makeStyles({
makeRed: {
  background-color: 'red'
}

})


export default useStyles;

然后在实际组件中只需要类 const as.

const classes = useStyles();
<Typography className = {classes.makeRed} />

Regular ClassName with Material UI