web-dev-qa-db-fra.com

Comment changer la couleur du contour de l'interface utilisateur du matériau React composant d'entrée?

J'ai cherché haut et bas une réponse, à la fois dans la documentation et dans d'autres SO questions.

J'utilise l'option createMuiTheme dans un fichier JS distinct pour remplacer certains styles par défaut, mais j'ai du mal à comprendre comment fonctionne l'option overrides.

Actuellement, mon bouton ressemble à ceci: enter image description here Le code que je dois obtenir jusqu'ici ressemble à ceci:

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

Ensuite, dans mon composant, je l'utilise comme tel:

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

Ma question est, qu'est-ce qui me manque pour rendre mon composant si funky? Et à l'avenir, comment savoir quoi cibler dans l'option overrides du ThemeProvider afin de ne pas rencontrer de situations similaires?

reactjsmaterial-ui
7
J. Jackson

Pour trouver les noms de classe et les propriétés CSS que vous pouvez modifier, la documentation de l'API Component affiche une liste .

TextField est cependant un cas spécial, car il combine et rend plusieurs sous-composants, il vous permet de transmettre des propriétés CSS au composant Input et au composant FormHelperText.

Et le OutlinedInput est un cas très spécial, car il utilise en fait NotchedInput pour l'élément d'entrée qui a ses propres propriétés CSS.

En regardant le code pour OutlinedInput vous pouvez voir les sélecteurs enfants utilisés:

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

Il semble que le problème soit que OutlinedInput ne définit pas correctement les styles de NotchedOutline

Vous pouvez avoir de la chance avec ceci:

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

Merci à Rudolf Olah de m'aider et de m'orienter dans la bonne direction! J'ai pu résoudre le problème avec le code suivant:

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'
            }
        }
    }
4
J. Jackson

J'ai trouvé la solution ici: les auteurs du framework n'ont pas vraiment bien couvert cela dans les documents.

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

0
Daniel Ram