<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

通过 aclassName上的样式MenuItem不起作用，因为所选菜单项的默认显示显示其子项。如果您将 adiv或放在span内的文本周围MenuItem，则可以为其添加样式。

如果您根本不想要列表中的项目，那么您希望使用renderValue 道具来控制所选项目的渲染。In the working example below, renderValueis set to undefinedwhen a value is selected in order to get the default behavior, but when the value is empty it renders the Placeholderelement.

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-Select不同的代码值和可见值 - 显示键而不是值
• 如何永久显示输入标签/占位符/标签？
• 选择芯片输入不显示所选值