javascript - ReactJS Material-UI TextField更改颜色标签和下划线事件字段输入

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

当在输入字段上激活焦点时，我不知道如何更改标签和下划线的颜色。

一些忠告？

最佳答案

您可以通过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/components/text-fields/#customized-inputs