如何通过主题调色板更改TextField下划线悬停颜色？

Question

material-ui v1

如何通过主题调色板更改TextField下划线悬停颜色？我知道有可能通过覆盖,但它如何通过标准调色板选项适用于所有组件？喜欢:

const themeMui = createMuiTheme({
  palette: {
    primary: lightBlue,
    secondary: blue,
    error: red,
    common: {
      darkBlack: blue.A700,
    }
  }
});

究竟是什么CSS代码我想要改变:

Answer 1

嘿,我意识到这有点老了,但我一直有同样的问题.我想出了这个.希望它有所帮助......那里的文档不是最好的!

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        color: 'red',
        '&:hover:not($disabled):after': {
          backgroundColor: 'red',
        },
        '&:hover:not($disabled):before': {
          backgroundColor: 'red',          // String should be terminated
        },
      },
    },
  },
});

Answer 2

这就是我的主题文件的样子，仅出于详细说明，我添加了一些随机颜色

import indigo from 'material-ui/colors/indigo';
import grey from 'material-ui/colors/grey';
import {fade} from 'material-ui';
import spacing from 'material-ui/styles/spacing';

export default {
  palette: {
    primary: indigo,
    secondary: grey,
  },
  status: {
    danger: 'orange',
  },
  typography: {
    // Tell Material-UI what's the font-size on the html element is.
    htmlFontSize: 10,
  },
  overrides: {
    MuiInput: {
      underline: {
        color: 'blue',//input color focus of not  
        backgroundColor:"grey",//background color of whole input 
        '&:hover:not($disabled):after': {
          backgroundColor: 'orange',//its when its hover and input is focused 
        },
        '&:hover:not($disabled):before': {
          backgroundColor: 'yellow',//its when you hover and input is not foucused 
        },
        '&:after': {
          backgroundColor: 'blue',//when input is focused, Its just for example. Its better to set this one using primary color
        },
        '&:before': {
          backgroundColor: 'red',// when input is not touched
        },
      },
    },
  },
};

Answer 3

我仍然遇到上述问题。此设置对我有用，可以将所有选项更改为白色。只需从mui-org/material-ui复制和粘贴即可删除我不想影响的任何内容。您可以像在上面的文件中一样使用它， const theme = createMuiTheme({..}) 或通过将 prop classes={{underline: classes.cssUnderline}} 添加到输入中作为样式类。

  underline: {
    '&:after': {
      borderBottom: `2px solid #FFFFFF`,
    },
    '&$focused:after': {
      borderBottomColor: `#FFFFFF`,
    },
    '&$error:after': {
      borderBottomColor: `#FFFFFF`,
    },
    '&:before': {
      borderBottom: `1px solid #FFFFFF`,
    },
    '&:hover:not($disabled):not($focused):not($error):before': {
      borderBottom: `2px solid #FFFFFF`,
    },
    '&$disabled:before': {
      borderBottom: `1px dotted #FFFFFF`,
    },
  },