Reactjs 在React中自定义材质UI组件

我正试图为React项目制作一个样板，使用Google制作的MaterialUI定制主题

我遵循了谷歌代码实验室：

基本上，我的计划是使用下面列出的组件制作定制组件：

但是，教程（codelab）没有显示任何有关更改组件样式的内容

---

我需要帮助。谢谢。

我希望这对寻找可能解决方案的人有用。所有解决方案都可以在Material UI的docu中找到，并提供了清晰的示例

我将向您展示带有组件的全局主题解决方案，它将为您提供组件之间的一致性，并应用全局样式

您可以利用

overrides

键来覆盖MaterialUI注入DOM的类和元素的样式。您可以在浏览器中检查它们，并查看要自定义的内容

您必须将子组件包装在MuiThemeProvider中，并将createMuiTheme对象作为主题属性值传递给它

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';


const theme = createMuiTheme({
  overrides: {
    // overrides label color and asterisk (if input set as required)
    MuiInputLabel: {
      root: {
        color: '#001E50 !important',
        '&$focused': {
          color: '#001E50 !important'
        }
      },
      asterisk: {
        color: '#001E50 !important'
      }
    },
    // overrides input styles
    MuiInputBase: {
      root: {
        color: '#001E50 !important',
        '&$focused': {
          color: '#001E50 !important'
        }
      }
    },
    // overrides the bottom line of the input
    MuiInput: {
      underline: {
        '&:before': {
          borderBottom: '1px solid #DFE4E8 !important'
        },
        '&:after': {
          borderBottom: '1px solid #001E50 !important'
        },
        }
      }
    }
  },
});


export function CustomInput() {
    return (
        <ThemeProvider theme = { theme }>
            <TextField name="name" label="Name" required/>
        </ThemeProvider>
    )
})

从“React”导入React；
从'@material ui/core/styles'导入{createMuiTheme，ThemeProvider}；
从“@material ui/core/TextField”导入TextField；
const theme=createMuiTheme({
覆盖：{
//覆盖标签颜色和星号（如果根据需要设置输入）
多输入标签：{
根目录：{
颜色：“#001E50！重要”，
“&$focused”：{
颜色：'#001E50！重要'
}
},
星号：{
颜色：'#001E50！重要'
}
},
//覆盖输入样式
MuiInputBase：{
根目录：{
颜色：“#001E50！重要”，
“&$focused”：{
颜色：'#001E50！重要'
}
}
},
//覆盖输入的底线
多输入：{
下划线：{
“&：在”之前：{
borderBottom:'1px实心#DFE4E8！重要'
},
“&：在”之后：{
borderBottom:'1px实心#001E50！重要'
},
}
}
}
},
});
导出函数CustomInput（）{
返回(
)
})

我同意。新材料ui文档很难定制。我不确定是否完全遵循。材料用户界面不是由谷歌制作的。如果调整此帖子的标签，您可能会找到更多帮助。