材料ui下一个对话框textfield下划线颜色

1 回答

• 5

  假设您正在使用material-ui-next，则可以在 createMuiTheme 中使用 overrides .

  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

  回复于 2024-04-25T20:51:18+08:00