带有 Material UI 的常规 ClassName

Question

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

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

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

但是当我在 v5 中使用常规的 classNames 时，它也能正常工作：

//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 作为。

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