如何更改Material UI React输入组件的轮廓颜色?

问题描述

在文档和其他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输入组件的轮廓颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！