更改TextField Material-UI v1的悬停颜色

Question

我无法通过覆盖类名来更改TextField的onHover颜色。我该如何做？

我正在使用Material UI v1：https://github.com/callemall/material-ui/tree/v1-beta

- Sandeep G

---

请添加您当前相关的代码。 - I haz kode

这不是一个编程问题，请参考以下示例代码 https://material-ui-1dab0.firebaseapp.com/component-demos/text-fields。 - Sandeep G

Answer 1

使用类进行覆盖无法解决问题。 只有通过在createMuiTheme中覆盖MUIclass才能解决问题，代码如下。

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:hover:not($disabled):before': {
          backgroundColor: 'rgba(0, 188, 212, 0.7)',
        },
      },
    },
  },
});

- Sandeep G

---

自您发帖以来，这个部分已经有所变化。我不得不对其进行如下修改：&:hover:not($disabled):not($focused):not($error):before': { borderBottomColor: "#ffffff", }, - Braden Holt

Answer 2

TextField使用Input组件实现，该组件公开了一个名为underline的类作为其CSS API的一部分。以下是Input source中此类的当前定义：

underline: {
  paddingBottom: 2,
  '&:before': {
    backgroundColor: theme.palette.input.bottomLine,
    left: 0,
    bottom: 0,
    // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
    content: '""',
    height: 1,
    position: 'absolute',
    right: 0,
    transition: theme.transitions.create('backgroundColor', {
      duration: theme.transitions.duration.shorter,
      easing: theme.transitions.easing.ease,
    }),
  },
  '&:hover:not($disabled):before': {
    backgroundColor: theme.palette.text.primary,
    height: 2,
  },
  '&$disabled:before': {
    background: 'transparent',
    backgroundImage: `linear-gradient(to right, ${theme.palette.input
      .bottomLine} 33%, transparent 0%)`,
    backgroundPosition: 'left top',
    backgroundRepeat: 'repeat-x',
    backgroundSize: '5px 1px',
  },
},

为了覆盖输入框的类名, 你需要通过TextField的属性传递它们。以下是一个示例，我将下划线的颜色更改为绿色：

// define a class that will be used to modify the underline class
const styleSheet = createStyleSheet(theme => ({
  greenUnderline: {
    '&:before': {
      backgroundColor: '#0f0',
    },
  },
}));

通过TextField的InputProps覆盖输入框下划线的类：

<TextField
  id="uncontrolled"
  label="Uncontrolled"
  defaultValue="foo"
  className={classes.textField}
  margin="normal"
  InputProps={{ classes: { underline: classes.greenUnderline } }}
/>

这可能并不完全符合你想要做的，但它应该能让你开始。

- Ken Gregory

Answer 3

这个对我有用：

    export const theme = createMuiTheme({
      overrides:{
              MuiFilledInput:{
                root:{
                  "&:hover": {
                    backgroundColor: '#5dc2a6',
                 }
                }
              }
            });

- Krisztián Szeles