ChakraUI Select组件图标无法完全隐藏问题求助

以下是几种有效的解决方式：

方法1：直接将icon设为null #

给Select组件的icon属性传入null，可完全移除图标及对应的容器元素：

<Select
  style={{ paddingInlineEnd: "0px" }}
  icon={null}
>
  {/* 选项内容 */}
</Select>

方法2：通过自定义样式隐藏图标容器 #

如果方法1不生效，可利用css属性直接隐藏chakra-select__icon-wrapper容器：

import { css } from '@chakra-ui/react';

<Select
  style={{ paddingInlineEnd: "0px" }}
  css={{
    '.chakra-select__icon-wrapper': {
      display: 'none'
    }
  }}
>
  {/* 选项内容 */}
</Select>

方法3：自定义无图标组件变体 #

创建一个全局可用的无图标Select变体，后续直接调用即可：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Select: {
      variants: {
        noIcon: {
          field: {
            '.chakra-select__icon-wrapper': {
              display: 'none'
            },
            paddingInlineEnd: '0px'
          }
        }
      }
    }
  }
});

// 使用变体
<Select variant="noIcon">
  {/* 选项内容 */}
</Select>

内容的提问来源于stack exchange，提问作者jmecs