<Select> Заполнитель стиля

Question

Так что я использую Material-Ui в своем проекте реагирования, я хотел бы установить заполнитель, который отличается от выбранного элемента только тем, что цвет серый вместо черного

              <Select
                name="answer"
                value={values.answer}
                onChange={handleChange}
                onBlur={handleBlur}
                displayEmpty
                className={styles.selectEmpty}
              >
                <MenuItem
                  value=""
                  disabled
                  className={styles.selectPlaceholderText}
                >
                  Answer
                </MenuItem>
                <MenuItem value={"1"}>1</MenuItem>
                <MenuItem value={"2"}>2</MenuItem>
                <MenuItem value={"3"}>3</MenuItem>
                <MenuItem value={"4"}>4</MenuItem>
              </Select>

Этот подходдает мне что-то очень близкое к тому, что мне нужно, проблема в том, что:

• Заполнитель "Ответ" есть как отключенный элемент списка, я даже не хочу его в списке.
• Изначально он там, как я хочу, но его цвет черный, я хотел бы сделать его серым, а стиль в selectPlaceholderText, похоже, не сработал.

Answer 1

Стилизация с помощью className на MenuItem не работает, потому что по умолчанию для выбранного элемента меню отображаются его дочерние элементы . Если вы поместите div или span вокруг текста в пределах MenuItem, будет полезно добавить к нему стилизацию.

Если вы вообще не хотите, чтобы элемент в списке,Вы хотите использовать renderValue prop для управления рендерингом выбранного элемента. В приведенном ниже рабочем примере renderValue устанавливается на undefined, когда значение выбрано для того, чтобы получить поведение по умолчанию, но когда значение пустое, он отображает элемент Placeholder.

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

const usePlaceholderStyles = makeStyles(theme => ({
  placeholder: {
    color: "#aaa"
  }
}));

const Placeholder = ({ children }) => {
  const classes = usePlaceholderStyles();
  return <div className={classes.placeholder}>{children}</div>;
};
export default function SimpleSelect() {
  const [answer, setAnswer] = React.useState("");

  return (
    <Select
      value={answer}
      displayEmpty
      onChange={event => setAnswer(event.target.value)}
      renderValue={
        answer !== "" ? undefined : () => <Placeholder>Answer</Placeholder>
      }
    >
      <MenuItem value={"1"}>1</MenuItem>
      <MenuItem value={"2"}>2</MenuItem>
      <MenuItem value={"3"}>3</MenuItem>
    </Select>
  );
}

Соответствующие ответы:

• Material UI Multi-Выберите другое значение кода и видимое значение - показать ключи вместо значений
• Как постоянно отображать метку ввода / метку-заполнитель / метку?
• Выбрать, если на входе микросхемы не отображается выбранное значение