qq_42391246的博客

首先，创建一个自定义主题文件theme.tspalette: {primary: {main: '#1976d2', // 自定义主色},main: '#dc004e', // 自定义次色},},root: {borderRadius: 8, // 自定义圆角textTransform: 'none', // 禁用大写},},},},});如果你想进一步自定义Button组件，可以使用styled},borderRadius: '12px', // 自定义圆角。

使用CSS模块的好处是你可以编写普通的CSS（或SCSS），并且所有类名都会自动转换为唯一的局部作用域名。这意味着你可以在不同的组件中自由地使用相同的类名，而不用担心它们之间的样式冲突。使用CSS变量的好处是你可以在SCSS文件中保持样式的封装，同时能够利用React的上下文来动态地更改这些值。文件中使用MUI的主题，你需要采取不同的方法，因为SCSS文件不直接访问到React的上下文中的主题对象。另一种方法是在你的JSX中定义CSS变量，并在SCSS文件中使用这些变量。文件中，编写你的样式。