CSS改变反应MUI选择答案

【问题标题】：CSS to change react MUI selectCSS改变反应MUI选择
【发布时间】：2021-02-07 05:56:23
【问题描述】：

我需要将 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

任何帮助！

提前致谢。

【问题讨论】：

你能重现这个吗？会有帮助的
@robert 抱歉，我忘了添加密码箱。现在我更新了。
检查 (codesandbox.io/s/material-demo-forked-yuly4)

标签： css reactjs material-ui

【解决方案1】：

来自文档：(https://material-ui.com/api/select/)

displayEmpty

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

渲染值

渲染选定的值。只有在 native 属性为 false（默认）时才能使用它。

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

sandbox

【讨论】：