CSS更改反应MUI选择

Question

我需要将React Material UI select组件UI更改为这样。

这是我到目前为止输入的CSS

 const styles = {
    width:'250px',
    border:'1px solid gray',
    borderBottom:'none',
    padding:'1rem'
  }

这是反应代码。

 <FormControl styles={styles}>
          {/* <InputLabel id='demo-simple-select-label'>Categories</InputLabel> */}
          <Select
            labelId='demo-simple-select-label'
            id='demo-simple-select'
            value={age}
            onChange={handleChange}
            style={styles}
          >
            <MenuItem value={'All'}>All</MenuItem>
            {categories.map((category) => (
              <MenuItem value={category} key={category}>
                {category}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

在这里，我对InputLable组件进行评论。现在，如果未选择任何内容，则该栏为空。当我没有使用CSS选择任何内容时，我想显示文本“类别”。还可以对该代码进行微调以使其与给定设计的100％匹配。

如何使用CSS实现此目标？

这是我的完整代码 https://codesandbox.io/s/material-demo-forked-wcmx1?file=/demo.js:1028-1606

任何帮助！

谢谢。

Answer 1

来自文档：（https://material-ui.com/api/select/）

1. displayEmpty

如果为true，则即使未选择任何项目也会显示一个值。 为了显示有意义的值，应将一个函数传递给renderValue属性，该属性将在未选择任何项目时返回要显示的值。您只能在本地属性为false（默认）时使用它。

1. renderValue

呈现所选值。您只能在本地属性为false（默认）时使用它。

签名： 函数（值：任何）=> ReactNode value：提供给组件的值。

sandbox