material-ui：需要帮助隐藏 <Select>

Question

我正在使用material-ui 中的Select 组件。在material-ui的文档中，据说您可以使用标签sx={{ ... }}覆盖组件中的CSS。我需要使用“.MuiSvgIcon-root-393”的 className 来设置组件的样式，它是“Select”的 SVG 子级，并且是下拉图标。这是我的尝试，但不起作用：

import { Select } from '@material-ui/core'

<Select
    sx={{
      '.MuiSvgIcon-root-393': {
        visibility: 'hidden'
      }
    }}
>
    ....
<Select/>

我真正想做的是隐藏选择箭头。

我希望获得有关如何继续此操作和/或任何提示的帮助。

Answer 1

认为这会解决您的问题。

github.com/mui/material-ui/issues/26473

看起来他们只是删除了图标，并调整填充以回收它所占用的空间。

Answer 2

我只是根据条件将“span”作为组件传递给 IconComponent，如下所示：

        <Select IconComponent={shouldDisplayIcon ? ExpandMoreIcon : "span"}>
          {options.map((option: any) => (
            <MenuItem key={option.value} value={option.value}>
              {option.displayValue}
            </MenuItem>
          ))}
        </Select>