Как изменить цвет контура входного компонента React материала UI?

Question

Я искал высокий и низкий ответ, как в документации, так и в других вопросах SO.

Я использую опцию createMuiTheme в отдельном файле JS, чтобы переопределить определенный стиль по умолчанию, ноЯ с трудом понимаю, как работает опция overrides.

В настоящее время моя кнопка выглядит следующим образом: Код, который я должен получить, выглядит следующим образом:

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'
        }
    }
}
)};

Тогда в моем компоненте я использую его так:

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

У меня вопрос: чего мне не хватает, чтобы компонент выглядел так забавно?И в будущем, как мне узнать, на что нужно нацелиться в опции overrides ThemeProvider, чтобы я не сталкивался с подобными ситуациями?

Answer 1

Это очень хорошо описано в документации здесь .

Щелкните внутри поля с надписью «Пользовательский CSS» для демонстрации.

Вот как это можно сделать, используя ваш оригинальный компонент TextField:

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'

const styles = theme => ({
  textField: {
    marginLeft: theme.spacing.unit * 3,
    marginBottom: '0px',
  },
  label: {
    '&$focused': {
      color: '#4A90E2'
    },
  },
  focused: {},
  outlinedInput: {
    '&$focused $notchedOutline': {
      border: '1px solid #4A90E2'
    },
  },
  notchedOutline: {},
})

const CustomOutline = ({classes}) => (
  <TextField
    id="outlined-email-input"
    label="Email"
    className={classes.textField}
    type="email"
    name="email"
    autoComplete="email"
    margin="normal"
    variant="outlined"
    InputLabelProps={{
      classes: {
        root: classes.label,
        focused: classes.focused,
      },
    }}
    InputProps={{
      classes: {
        root: classes.outlinedInput,
        focused: classes.focused,
        notchedOutline: classes.notchedOutline,
      },
    }}
  />
)

CustomOutline.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(CustomOutline)

Answer 2

Спасибо Рудольфу Олаху за помощь и направил меня в правильном направлении!Мне удалось решить проблему с помощью следующего кода:

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'
            }
        }
    }

Answer 3

Я нашел решение здесь: авторы фреймворка не очень хорошо описали это в документах.

https://github.com/mui-org/material-ui/issues/13557

Answer 4

Чтобы найти имена классов и свойства CSS, которые вы можете изменить, документация для API-интерфейса компонентов показывает список .

TextField - это особый случай, поскольку он объединяети визуализирует несколько подкомпонентов, он позволяет передавать свойства CSS компоненту Input и компоненту FormHelperText.

И OutlinedInput - это особый случай, потому чтофактически использует NotchedInput для элемента ввода, который имеет свои собственные свойства CSS.

Глядя на код для OutlinedInput , можно увидеть используемые дочерние селекторы:

root: {
  position: 'relative',
  '& $notchedOutline': {
    borderColor,
},
// ...

Похоже, проблема в том, что OutlinedInput неправильно устанавливает стили для NotchedOutline

Возможно, вам повезет с этим:

const theme = createMuiTheme({
  // ...other code,
  overrides: {
    // ...
    MuiOutlinedInput: {
      focused: {
        border: '1px solid #4A90E2'
      },
      '& $notchedOutline': {
        border: '1px solid #4A90E2'
      },
    },
    // ...
  }
});