Reactjs 材质ui下一个对话框文本字段下划线颜色

如何使用辅助调色板颜色更改对话框中文本字段的下划线颜色？我不能这样做，因为文档非常混乱

假设您接下来使用的是material ui，您可以在CreateMuiteme中使用覆盖

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:before': { //underline color when textfield is inactive
          backgroundColor: 'red',
        },
        '&:hover:not($disabled):before': { //underline color when hovered 
          backgroundColor: 'green',
        },
      }
    }
  }

}))

然后用MuiThemeProvider包装你的应用程序

ReactDOM.render(
 <MuiThemeProvider theme={theme}>
   <Root />
 </MuiThemeProvider>,
 document.getElementById('root')
);

ReactDOM.render(
,
document.getElementById（'root'））
);

---

它将覆盖所有TextField材质ui组件的下划线颜色。如果只需要更改一个文本字段的颜色，请使用

Rinat的答案在当前版本v16.13.1上似乎不起作用。使用

borderBottom

而不是

backgroundColor

时需要稍微更改

（借用他的答案让答案更清楚，希望我没有违反任何SO准则）

然后像以前一样用MuiThemeProvider包装：

import { ThemeProvider } from "@material-ui/styles";

ReactDOM.render(
 <MuiThemeProvider theme={theme}>
   <Root />
 </MuiThemeProvider>,
 document.getElementById('root')
);

从“@material ui/styles”导入{ThemeProvider}”；
ReactDOM.render(
,
document.getElementById（'root'））
);

谢谢！我刚想好怎么做，但这件更干净！

import { ThemeProvider } from "@material-ui/styles";

ReactDOM.render(
 <MuiThemeProvider theme={theme}>
   <Root />
 </MuiThemeProvider>,
 document.getElementById('root')
);