3
votes

Modifier le contour de OutlinedInput avec React material-ui

Note rapide: il ne s'agit pas d'un double de Comment changer la couleur du contour du composant d'entrée Material UI React?

Avec material-ui (React), je ne peux pas supprimer le contour en survol ou en focus. La raison pour laquelle j'utilise cette entrée est de demander l'ajout d'une petite bordure rouge lorsqu'un avertissement se produit. Je peux changer les styles de mise au point et de survol. Ceci est testé dans l'image suivante:

Où ce CSS est appliqué lorsque l'entrée est focalisée:

 <OutlinedInput
            disableUnderline={true}
            notched={true}
            id="adornment-weight"
            classes={{root: classes.outlinedInput, focused: classes.outlinedInputFocused}}
            value={this.state.budgetValue}
            onChange={evt => this.updateBudgetValue(evt)}
            onKeyPress={evt => this.handleKeyPress(evt)}
            endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
          />

Composant

outlinedInputFocused: {
     borderStyle: 'none',
     borderColor: 'red',
     outlineWidth: 0,
     outline: 'none',
     backgroundColor: 'green'
  },

Comme vous pouvez le voir, la couleur de l'image est verte, mais il y a toujours un contour. Même si le contourWidth est égal à 0 et que le contour est défini sur aucun dans le CSS. Comment puis-je modifier / désactiver ce plan?

reactjs css material-ui

0 commentaires

3 Réponses :

0
votes

OutlinedInput est conçu de telle manière que vous ne pouvez pas désactiver son contour, vous devez utiliser TextField avec la variante 'contour' par défaut et «aucun» sur le focus. Vous pouvez voir l'exemple des ornements d'entrée soulignés en utilisant TextField ici

0 commentaires

8
votes

La clé pour comprendre comment remplacer ces styles est de regarder comment ils sont définis dans le code source Material-UI. La question que vous avez référencée montre également une partie de la syntaxe nécessaire.

Voici une version abrégée (j'ai omis les styles qui ne sont pas liés au contour) des styles de OutlinedInput.js :

import React from "react";
import ReactDOM from "react-dom";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {
    "& $notchedOutline": {
      borderWidth: 0
    },
    "&:hover $notchedOutline": {
      borderWidth: 0
    },
    "&$focused $notchedOutline": {
      borderWidth: 0
    }
  },
  focused: {},
  notchedOutline: {}
});
function App(props) {
  const { classes } = props;
  return (
    <div className="App">
      <OutlinedInput
        disableUnderline={true}
        notched={true}
        id="adornment-weight"
        classes={classes}
        value={1}
        endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

0 commentaires

0
votes

Vous pouvez utiliser un style en ligne comme celui-ci:

<MyComponent style={{outline: 'none'}} />

0 commentaires