Reactjs material-ui TextField меняет цвет метки и подчеркивает ввод поля активности - PullRequest
Новая
       24

Reactjs material-ui TextField меняет цвет метки и подчеркивает ввод поля активности

1 голос
/ 28 июня 2019

enter image description here

<TextField
    id="standard-full-width"
    label="Password"
    style={{ margin: 8 }}
    fullWidth
    margin="normal"
    placeholder="*******"
/>

Я не могу понять, как изменить цвет надписи и подчеркивания при активации фокуса на поле ввода.

Несколько советов?

1 Ответ

1 голос
/ 28 июня 2019

Стиль можно отменить, указав его через свойство classes.Я добавил пример, используя хук makeStyles, но это свойство также можно использовать с классами, предоставленными из withStyles HOC .

import React from "react";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    "& label.Mui-focused": {
      color: "orange"
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: "orange"
    }
  }
}));

function App() {
  const classes = useStyles();
  return <TextField label="My label" classes={classes} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Итак, если вы используете Component, это будет выглядеть так: 

import React from "react";
import { TextField } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
    root: {
        "& label.Mui-focused": {
          color: "orange"
        },
        "& .MuiInput-underline:after": {
          borderBottomColor: "orange"
        }
    }
})

class App extends React.Component {
    render() {
        return (
            <TextField label="My label" classes={this.props.classes} />
        )
    }
}

export default withStyles(styles)(App)

Чтобы прочитать о настройке компонента TextField, ознакомьтесь со следующими примерами: https://material -ui.com / компоненты / текстовые поля / # индивидуальные входы-

...