材质ui下一个对话框文本字段下划线颜色 [英] material ui next dialog textfield underline color

问题描述

如何使用辅助调色板颜色更改对话框中文本字段的下划线颜色?我无法这么做，因为它的文档非常混乱

How can I change the underline color of a textfield inside a dialog with my secondary palette color? I couldn't do it since the documentation it's quite confusing

推荐答案

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

Assuming you are using material-ui-next, you can use overrides in 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材质-ui组件的下划线颜色.如果您只需要更改一个TextField的颜色，请使用 https://material-ui-next.com/customization/overrides/#1-specific-variation-for-a-one-situationation

It will overwrite underline color of all TextField material-ui components. If you need to change color only for one TextField, use https://material-ui-next.com/customization/overrides/#1-specific-variation-for-a-one-time-situation

这篇关于材质ui下一个对话框文本字段下划线颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！