typescript 在对材质ui组件进行样式化时，Mui v5没有覆盖匹配项

o2g1uqev 于 2023-08-07 发布在 TypeScript

关注(0)|答案(1)|浏览(125)

如图所示，我只是想为Material UI组件（TextField）添加更多的样式，但是无论我怎么尝试，我总是得到这个错误。从来没有遇到过问题，当我使用styled-components虽然。

的数据

1条答案

material-ui（MUI）已经提供了一种根据开发需要定制UI的方法。您可以按照以下几个步骤自定义UI/向MUI组件添加新样式。
1.一次性定制

<Slider
       defaultValue={30}
       sx={{
         width: 300,
         color: 'success.main',
       }}
     />

字符串
1.替代嵌套构件样式。

<Slider
   defaultValue={30}
   sx={{
 width: 300,
 color: 'success.main',
 '& .MuiSlider-thumb': {
   borderRadius: '1px',
 },
  }}
 />

型
1.使用类名覆盖样式
第一个月
您可以在MUI官方文件中阅读更多信息：https://mui.com/material-ui/customization/how-to-customize/#overriding-styles-with-class-names