css - 如何移除 React MUI Select 组件框架

Question

我很难移除 <Select> 周围的框架来自 React Material UI 库的组件。下图中，当 <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>