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

Question

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

当焦点在输入字段上激活时，我无法弄清楚如何更改标签和下划线的颜色。

一些建议？

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