Question

有一个适用于上一版本的答案：material ui next dialog textfield underline color

由于材料ui的版本1已经用完，这个配置对我来说不再适合了。悬停部分不再有效：

'&:hover:not($disabled):before': { //underline color when hovered 
    backgroundColor: 'green',
},

有没有人现在已经知道如何做到这一点？

Answer 1

在我的项目中（我使用的是@ material-ui / core：“ 1.4.3”），为了解决此问题，我找到了此解决方案。

1）首先在您的组件上导入MuiThemeProvider和createMuiTheme：

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

2）然后在导入后添加以下代码行：

const theme = createMuiTheme({
  // For Underline Color After Click
  palette: {
    primary: { main: "#00BCD6"},
  },
  // For Underline Hover Color
  overrides: {
    MuiInput: {
      underline: {
        '&:hover:not($disabled):not($error):not($focused):before': {
          borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
        },
      },
    }
  }
});

3）最后，用以下代码包装要编辑的组件：

<MuiThemeProvider theme={theme}>

// Your Component here

</MuiThemeProvider>

希望对您有所帮助！：）

材料ui下一个textfield下划线颜色

1 个答案: