ReactJS Material-UI TextField更改颜色标签和下划线活动字段输入

Question

+---+---------------------+
|key|map                  |
+---+---------------------+
|b  |Map(v1 -> 1, v2 -> 0)|
|a  |Map(v1 -> 2, v2 -> 1)|
+---+---------------------+

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

一些建议？

Answer 1

您可以通过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