So ändern Sie die Rahmenfarbe der Material-UI <TextField/>

Ich kann nicht scheinen, um herauszufinden, wie man ändern Sie die umrissfarbe eines skizzierten Variante
Ich schaute mich um GitHub-issues und die Leute scheinen zu sein, zeigt in Richtung der "InputProps" - Eigenschaft, aber das scheint mir nichts zu tun.
So ändern Sie die Rahmenfarbe der Material-UI <TextField/>
Hier ist mein code in seinem aktuellen Zustand

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);
InformationsquelleAutor kinger6621 | 2018-10-21
  1. 1

    Können Sie überschreiben alle Klassennamen injiziert, die durch Material-UI-Dank der classes Eigenschaft.
    Haben Sie einen Blick auf überschreiben mit Klassen Abschnitt und die Implementierung der Komponente für mehr detail.

    und schließlich :

    Die API-Dokumentation der Input Reagieren Komponente. Erfahren Sie mehr über die Eigenschaften und die CSS-Anpassung Punkte.

    • Können Sie ein konkretes Beispiel in Bezug auf den Fall in Frage? So ändern Sie die Farbe der Grenze?
    • versuchen Sie, die andere Antwort, es funktioniert
    InformationsquelleAutor amin_2c
  2. 22

    Werfen Sie einen Blick auf diese, machte ich eine kurze demo:

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

    Es ändert die Standard-Rahmenfarbe und die label-Farbe des Material-UI TextField, sondern hält die primäre Farbe, wenn konzentriert.

    Werfen Sie auch einen Blick auf diesen link, es gab mir die "Idee":

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

    Wenn Sie die Farbe ändern möchten, wenn fokussierten Blick auf diese Beispiele aus der Dokumentation:

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

    • Ah, Sie immer noch brauchen !wichtig in einigen Fällen. Danke!!!
    • Du bist herzlich willkommen @benihana21
    InformationsquelleAutor Peter Catalin
  3. 6
    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"
            />

    So ändern Sie die Rahmenfarbe der Material-UI <TextField/>

    InformationsquelleAutor Hitesh Sahu
  4. 3

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

                    />

    //deklarieren const und fügen Sie den material-UI-Stil

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

    • Hinweis: TextField-muss-Variante='skizziert'
    • können Sie bitte erklären. detail..
    InformationsquelleAutor Jojo Joseph
  5. 1

    Ausweitung Peter Antwort. Sie könnte auch alle event-Farben ohne !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

    InformationsquelleAutor Diego Felipe
  6. 1
      inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}

    Den Inputprops Werke von styling eingetragen, die Eingabe von Daten in den textfield-und auch wir können className für benutzerdefinierte Farben..

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

    Diesem const Stil funktioniert der äußeren Trank der den text eingereicht...

    Das styling der äußere Teil des material-UI ist oben gefragt, für den Wandel...

    InformationsquelleAutor Jojo Joseph
  7. 0

    Ich meine Mui.TextField haben 3 Ausführungen: standard, gefüllt, beschrieben.
    Die obige Lösung funktioniert nur, skizzierten Stil

    InformationsquelleAutor Cong Dan Luong
Schreibe einen Kommentar