我无法通过覆盖类名来更改TextField的onHover颜色 . 我怎样才能做到这一点?
我正在使用素材UI v1:https://github.com/callemall/material-ui/tree/v1-beta
TextField是使用Input组件实现的,该组件将名为下划线的类公开为其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', }, },
要override the Input's classes,您需要使用其InputProps属性通过TextField传递它们 . 这是一个示例,我将下划线的颜色更改为绿色:
// define a class that will be used to modify the underline class const styleSheet = createStyleSheet(theme => ({ greenUnderline: { '&:before': { backgroundColor: '#0f0', }, }, }));
通过TextField的InputProps覆盖Input的下划线类:
<TextField id="uncontrolled" label="Uncontrolled" defaultValue="foo" className={classes.textField} margin="normal" InputProps={{ classes: { underline: classes.greenUnderline } }} />
这可能不是你想要做的,但它应该让你开始 .
覆盖 classes 没有帮助 . 它通过覆盖 createMuiTheme 中的 MUIclass 工作如下 .
const theme = createMuiTheme({ overrides: { MuiInput: { underline: { '&:hover:not($disabled):before': { backgroundColor: 'rgba(0, 188, 212, 0.7)', }, }, }, }, });
2 回答
TextField是使用Input组件实现的,该组件将名为下划线的类公开为其CSS API的一部分 . 以下是Input source中此类的当前定义:
要override the Input's classes,您需要使用其InputProps属性通过TextField传递它们 . 这是一个示例,我将下划线的颜色更改为绿色:
通过TextField的InputProps覆盖Input的下划线类:
这可能不是你想要做的,但它应该让你开始 .
覆盖 classes 没有帮助 . 它通过覆盖 createMuiTheme 中的 MUIclass 工作如下 .