如何更改Material UI React输入组件的轮廓颜色? [英] How to change outline color of Material UI React input component?
问题描述
在文档和其他SO问题中,我都在寻找高低答案.
I've searched high and low for an answer, in both the docs and other SO questions.
我在单独的JS文件中使用createMuiTheme
选项来覆盖某些默认样式,但是很难理解overrides
选项的工作原理.
I'm using the createMuiTheme
option in a separate JS file to override certain default styling, but am having a hard time understanding how the overrides
option works.
当前,我的按钮如下所示: 我需要的代码看起来像这样:
Currently my button looks like this: The code I've got to get this far looks like this:
const theme = createMuiTheme({
...other code,
overrides: {
MuiFormControlLabel: {
focused: {
color: '#4A90E2'
}
},
MuiOutlinedInput: {
focused: {
border: '1px solid #4A90E2'
},
notchedOutline: {
border: '1px solid #4A90E2'
},
},
MuiFormLabel: {
focused: {
color: '1px solid #4A90E2'
}
}
}
)};
然后在我的组件中,我按如下方式使用它:
Then in my component, I'm using it as such:
import theme from './styles/ThemeStyles';
import { withStyles } from '@material-ui/core/styles';
class SignInForm extends Component {
render() {
const { classes } = this.props;
<form className={classes.container} noValidate autoComplete='off'>
<TextField
id="outlined-email-input"
label="Email"
className={classes.textField}
type="email"
name="email"
autoComplete="email"
margin="normal"
variant="outlined"
/>
</form>
}}
我的问题是,我缺少什么使我的组件看起来如此时髦?将来,我如何知道在ThemeProvider的overrides
选项中定位的对象,以免遇到类似情况?
My question is, what am I missing to make my component look so funky? And in the future, how do I know what to target in the overrides
option of the ThemeProvider so that I don't run into similar situations?
推荐答案
感谢Rudolf Olah的帮助,并向我指出了正确的方向!我可以使用以下代码解决此问题:
Thanks to Rudolf Olah's help and pointing me in the right direction! I was able to solve the issue with the following code:
overrides: {
MuiOutlinedInput: {
root: {
position: 'relative',
'& $notchedOutline': {
borderColor: 'rgba(0, 0, 0, 0.23)',
},
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
borderColor: '#4A90E2',
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
borderColor: 'rgba(0, 0, 0, 0.23)',
},
},
'&$focused $notchedOutline': {
borderColor: '#4A90E2',
borderWidth: 1,
},
},
},
MuiFormLabel: {
root: {
'&$focused': {
color: '#4A90E2'
}
}
}
这篇关于如何更改Material UI React输入组件的轮廓颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!