Reactjs material-ui TextField 更改颜色标签和下划线活动字段输入

Question

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

I'm not able to figure out how to change the color of the label and the underline when the focus is activated on the input field.

Some advice?

Answer 1

You can overrule style by supplying them via the classes property. I've added an example using the makeStyles hook but the property can also be used with classes supplied from the 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);

So, in case you're using a Component it will be like this:

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)

To read up on customizing the TextField component check out these examples: https://material-ui.com/components/text-fields/#customized-inputs