材质ui的样式更改InputLabel组件不起作用。下面的代码

Question

如何更改显示为灰色的标签的颜色？根据页面的主题，我必须更改标签的颜色，或者即使我删除了覆盖颜色也应该可以使用。

示例删除默认的一个：

.MuiFormLabel-root { 
    /* color: rgba(0, 0, 0, 0.54); //default in the browser
}

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

    const useStyles = makeStyles(theme => ({
      root: {
        "& .MuiFormLabel-root": {
          color: "white"
        }
      }
    }));
    export default function SelectBox(props) {
        const classes = useStyles();
        return (
             <FormControl
                style={{ width: '100%' }}>
                <InputLabel shrink className={classes.root}>
                    {props.label}
                </InputLabel> 
    </FormControl>
        )
    }

Answer 1

您可以传递classes对象并覆盖root对应的.MuiInputLabel-root

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

const useStyles = makeStyles(theme => ({
  root: {
    color: "red"
  }
}));

export default function SelectBox(props) {
  const classes = useStyles();
  return (
    <FormControl style={{ width: "100%" }}>
      <InputLabel shrink classes={{ root: classes.root }}>
        {props.label}
      </InputLabel>
    </FormControl>
  );
}

要获得这样的结果-

此处的工作沙箱-https://codesandbox.io/s/update-input-label-color-kzew2?file=/demo.js:0-513