Question

material-ui v1

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

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

Answer 4

仅使用CSS，您可以使用以下命令：

lambda

如果仅将样式表应用于该页面，则效果最好，否则，整个应用程序中带有div::after{ border-bottom: 2px solid white !important; }的所有div现在都将带有边框。

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

4 个答案: