Question

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

Answer 1

假设您正在使用material-ui-next，您可以在 createMuiTheme 中使用覆盖。

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')
);

它将覆盖所有TextField material-ui组件的下划线颜色。如果只需要为一个TextField更改颜色，请使用https://material-ui-next.com/customization/overrides/#1-specific-variation-for-a-one-time-situation

Answer 2

Rinat的答案似乎不适用于当前版本v16.13.1。要使用borderBottom而不是backgroundColor，需要稍作更改。

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

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

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:before': { //underline color when textfield is inactive
          borderBottom: `1px solid ${"red"}`,
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        },
        '&:hover:not($disabled):before': { //underline color when hovered 
          borderBottom: `2px solid ${"red"}`,
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        },
      }
  }
}

像以前一样，用MuiThemeProvider包装它：

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

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

material ui next dialog textfield underline color

2 个答案: