web-dev-qa-db-fra.com

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

Je n'arrive pas à comprendre comment changer la couleur de contour d'une variante décrite. J'ai regardé autour des problèmes de GitHub et les gens semblent vouloir utiliser la propriété "InputProps" mais cela ne semble rien faire. This is the field 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);
reactjsmaterial-uijss
14
kinger6621

Vous pouvez remplacer tous les noms de classe injectés par Material-UI grâce à la propriété classes. Regardez surcharger avec la section classes et l'implémentation du composant pour plus de détails.

et enfin :

La documentation de l'API du composant Input React. En savoir plus sur les propriétés et les points de personnalisation CSS.

1
amin_2c

Jetez un coup d'oeil à ça, j'ai fait une démo rapide:

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

Il modifie la couleur de bordure par défaut et la couleur d'étiquette du TextField Matériau-UI, mais conserve la couleur primaire lors de la mise au point.

Regardez aussi ce lien, ça m'a donné "l'idée":

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

Si vous souhaitez modifier la couleur lorsque ciblé, consultez ces exemples de la documentation:

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

18
Peter Catalin
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"
            />

enter image description here

4
Hitesh Sahu

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éclare le const et ajoute le style de l'interface utilisateur du matériau

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

})(Champ de texte);

2
Jojo Joseph

Extension de Peter réponse . Vous pouvez également changer toutes les couleurs d'événement sans le !important:

 cssOutlinedInput: {
        "&:not(hover):not($disabled):not($cssFocused):not($error) $notchedOutline": {
          borderColor: "red" //default      
        },
        "&:hover:not($disabled):not($cssFocused):not($error) $notchedOutline": {
          borderColor: "blue" //hovered
        },
        "&$cssFocused $notchedOutline": {
          borderColor: "purple" //focused
        }
      },
      notchedOutline: {},
      cssFocused: {},
      error: {},
      disabled: {}

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

1
Diego Felipe

Je veux dire que Mui.TextField a 3 styles: standard, rempli, décrit. La solution ci-dessus ne fonctionne que sur le style indiqué

0
Cong Dan Luong
  inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}

Inputprops fonctionne en stylisant les données d’entrée enterd dans le champ de texte et nous pouvons également utiliser 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 de const travaille la potion extérieure du texte déposé ...

Le style de la partie extérieure du matériau UI est demandé ci-dessus pour le changement ...

0
Jojo Joseph