Question

所以我在我的react项目上使用了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进行样式设置不起作用，因为所选菜单项displays its children的默认显示。如果您在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>
  );
}

<选择>占位符样式

1 个答案: