изменение стиля материала 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= / демо. js: 0-513