Material UI V5 主题定制答案

【问题标题】：Material UI V5 Theming CustomizationMaterial UI V5 主题定制
【发布时间】：2021-12-18 17:53:09
【问题描述】：

我怎样才能覆盖这个材质ui的css？我想将 de 颜色更改为：白色，因为当我尝试在 TextField 上书写时，颜色是黑色

【问题讨论】：

【解决方案1】：

如果您希望将文本颜色设为白色

您可以为 TextField 添加 sx 属性。

<TextField
  variant="outlined"
  sx={{
    '& .MuiInputBase-input': {
      color: 'white',
    },
  }}
/>

如果您想自定义默认的 MUI 主题

导入 createTheme 和 ThemeProvider。

import { createTheme, ThemeProvider } from '@mui/material/styles';
覆盖主题。（您可以转到 https://mui.com/customization/default-theme/ 并找到要覆盖的确切内容。）
```
 const theme = createTheme({
     palette: {
       common: {
         white: '#FFFAFA'
       },
     }
   })
```
用ThemeProvider 包装你的组件或TextField。

<ThemeProvider theme={theme} >
      <TextField
        variant="outlined"
        sx={{
          '& .MuiInputBase-input': {
            color: 'white',
          },
        }}
      />
</ThemeProvider>

TextField 中的“白色”颜色将是您自定义的白色。您还可以为应用程序定义调色板。

更多详情请参考mui.com/customization/theming。

这是一个 youtube 教程 https://www.youtube.com/watch?v=xIIJfmDnvPE&ab_channel=TheNetNinja

【讨论】：

【解决方案2】：

如果您的自定义样式被 Material UI 覆盖，您只需添加 !important;在您的每个自定义样式之后。

【讨论】：

【解决方案3】：

你可以在对象的props上加上sx：

<TextField id="outlined-basic" sx={{background:'red'}} label="Outlined" variant="outlined" />

点击链接查看sx的道具：https://mui.com/system/the-sx-prop/

【讨论】：

【解决方案4】：

请参阅overriding nested component styles 的文档。

对于 TextField 这将是：

<TextField
  variant="outlined"
  sx={{
    '& .MuiInputBase-input': {
      color: 'white',
    },
  }}
/>)

【讨论】：