首页 文章

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

提问于
浏览 次
2

material-ui v1

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

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

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

enter image description here

material-ui

4 回答

  • 5

    这就是我的主题文件的样子，只是为了细节，我添加了一些随机颜色

    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
        },
      },
    },
  },
};
    回复于
  • 2

    仅使用css，您可以使用以下内容：

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

    如果样式表仅应用于该页面，则此方法效果最佳，否则，整个应用程序中任何带有 ::after 的div现在都将具有边框 .

    回复于
  • 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
        },
      },
    },
  },
});
    回复于
  • 0

    我仍然遇到上述问题 . 此设置适用于我将所有选项更改为白色 . 只需复制并粘贴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`,
    },
  },
    回复于

相关问题