材料-UI：需要帮助隐藏下拉图标＆lt; select＆gt;

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/mui/material-ui/sissues/sissues/26473 只需删除图标，然后调整填充以收回将要占用的空间即可。

Answer 2

根据条件，我只是将“跨度”作为ICONCOMPONENT的组成部分，这是这样的：

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

Answer 3

在选择 sx 中使用
svg: {display:"none"}

这应该隐藏向下箭头图标

Answer 4

传递 popupIcon={null} 足以满足 的要求。 组件。对于其他人来说可能都是一样的。

<Autocomplete
  ...
  popupIcon={null}
/>