Comment changer la couleur de la bordure de Material-UI <TextField/>

Question

Je n'arrive pas à trouver comment changer la couleur du contour d'une variante encadrée. J'ai regardé les problèmes sur GitHub et les gens semblent indiquer qu'il faut utiliser la propriété "InputProps", mais cela ne semble rien faire. Voici mon code dans son état actuel

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

const styles = theme => ({
field: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    height: '30px !important'
},
});

class _Field extends React.Component {
      render() {
          const { classes, fieldProps } = this.props;
             return (
                <TextField
                {...fieldProps}
                label={this.props.label || "<Un-labeled>"}
                InputLabelProps={{ shrink: true }} // stop from animating.
                inputProps={{ className: classes.fieldInput }}
                className={classes.field}
                margin="dense"
               variant="outlined"
            />
        );
    }
}

_Field.propTypes = {
    label: PropTypes.string,
    fieldProps: PropTypes.object,
    classes: PropTypes.object.isRequired
}

export default withStyles(styles)(_Field);

Answer 1

https://codesandbox.io/s/6rx8p

                      <CssTextField      

                       label="Username"

                       className="username"
                       name="username"
                       onChange={this.onChange}
                       type="text"
                       autoComplete="current-password"
                       margin="normal"
                       inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}

                    />

//déclarer la const et ajouter le style material UI

const CssTextField = withStyles({
  root: {
    '& label.Mui-focused': {
      color: 'white',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: 'white',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'yellow',
      },
    },
  },
})(TextField);

Answer 2

Jetez un coup d'œil à ceci, j'ai fait une démonstration rapide :

https://stackblitz.com/edit/material-ui-custom-outline-color

Il modifie la couleur de la bordure par défaut et la couleur de l'étiquette du champ textuel Material-UI, mais conserve la couleur primaire lorsqu'il est ciblé.

Jetez également un coup d'œil à ce lien, il m'a donné "l'idée" :

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

Si vous voulez changer la couleur lors de la mise au point, regardez ces exemples de la documentation :

https://material-ui.com/demos/text-fields/#customized-inputs

Answer 3

Au cas où quelqu'un voudrait faire cela avec des composants stylisés :

import styled from "styled-components";
import {TextField} from "@material-ui/core";

const WhiteBorderTextField = styled(TextField)`
  & label.Mui-focused {
    color: white;
  }
  & .MuiOutlinedInput-root {
    &.Mui-focused fieldset {
      border-color: white;
    }
  }
`;

Ça m'a pris beaucoup trop de temps à comprendre. J'espère que ça aidera quelqu'un.

Answer 4

const styles = theme => ({
  notchedOutline: {
    borderWidth: "1px",
    borderColor: "yellow !important"
  }
});

 <TextField
              variant="outlined"
              rows="10"
              fullWidth
              InputProps={{
                classes: {
                  notchedOutline: classes.notchedOutline
                }
              }}
              id="standard-textarea"
              label="Input Set"
              helperText="Enter an array with elemets seperated by , or enter a JSON object"
              placeholder="Placeholder"
              multiline
              value={"" + this.props.input}
              onChange={this.props.handleChangeValue("input")}
              className={classes.textField}
              margin="normal"
            />

Answer 5

  inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}

L'Inputprops fonctionne en stylisant les données saisies dans le champ de texte et nous pouvons également utiliser le className pour une coloration personnalisée .

      const CssTextField = withStyles({
     root: {
    '& label.Mui-focused': {
     color: 'white',
      },
     '& .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
     },
    '& .MuiOutlinedInput-root': {
     '& fieldset': {
     borderColor: 'white',
     },
     '&:hover fieldset': {
      borderColor: 'white',
       },
     '&.Mui-focused fieldset': {
       borderColor: 'yellow',
     },
     },
    },

Ce style const travaille la potion extérieure du texte déposé...

Le style de la partie extérieure de l'interface utilisateur matérielle est au-dessus de la demande de changement...