如何删除 React MUI Select 组件框架

Question

我努力从 React Material UI 库中删除<Select>组件周围的框架。 在下图中，当<Select>组件未被选中时，它周围有一个黑色边框/边框。

所描述组件的代码是：

<Box sx={{
                minWidth: 60,
            }}>
                <Select
                    value={this.state.lang}
                    onChange={this.handleChange}
                    sx={{
                        outline: 0,
                        border: 0,
                        boxShadow: 'none',
                        color: '#fff',
                    }}

                >
                    <MenuItem value={'en'}>EN</MenuItem>
                    <MenuItem value={'de'}>DE</MenuItem>
                </Select>
            </Box>

任何线索，我想念什么？ 我宁愿省略我必须设置整个<Select/>样式的解决方案。

谢谢大家。

Answer 1

边框在fieldset标签上。 将其设置为“无”

<Select
  ...
  sx={{ '& > fieldset': { border: 'none' } }}
>
  <MenuItem value={'en'}>EN</MenuItem>
  <MenuItem value={'de'}>DE</MenuItem>
</Select>

Answer 2

您可以通过variant道具来管理它。 outlined了它的默认值，但还有另外两个选项filled和standard 。 最后两个选项都没有轮廓但有底部边距，您可以通过 sx 或 css class 进行管理。因此添加variant="filled"或variant="standard"来修复它。