How can i change TextField underline hover color by theme palette?

问题

material-ui v1

How can I change TextField underline hover color by theme palette? I know it possible by overrides, but how it can work for all components by standart palette options? like:

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

What exactly CSS code I want to change:

回答1:

Hey I realize this is a bit old, but I have been having the same problem. I came up with this. Hope it helps... there docs are not the best on this!

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

回答2:

This is how my theme file look like, Just for details I have added some random colors

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
        },
      },
    },
  },
};

回答3:

I was still having issues with the above. This setup worked for me to change all options to white. Just a copy and paste from mui-org/material-ui removing anything i don't want to effect. You can use it like in the file above, const theme = createMuiTheme({..}) or as a style class by adding the prop classes={{underline: classes.cssUnderline}} to the input.

  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`,
    },
  },

回答4:

Using only css, you can use something like this:

div::after{
  border-bottom: 2px solid white !important;
}

This works best if the style sheet is only applied to that page, otherwise, any div with an ::after in your entire application will now have a border.

来源：https://stackoverflow.com/questions/46173259/how-can-i-change-textfield-underline-hover-color-by-theme-palette

标签

material-ui