打开下拉菜单时如何更改 Material UI Select 组件的轮廓颜色（在轮廓模式下）（当前为蓝色）答案

【问题标题】：How to change outline color of Material UI Select component (in outlined mode) when dropdown is opened ( currently it is blue )打开下拉菜单时如何更改 Material UI Select 组件的轮廓颜色（在轮廓模式下）（当前为蓝色）
【发布时间】：2020-09-13 20:40:58
【问题描述】：

如何正确更改 Material-UI 选择组件轮廓变体的轮廓颜色？请帮我把这个蓝色改成红色，不胜感激

Image for reference

组件参考代码供参考

<FormControl variant="outlined" fullWidth size={'small'} className={classes.formControl}>
                        <InputLabel id="xAxisDropdown">Select Hardware Platforms</InputLabel>
                        <Select
                           multiple
                           fullWidth
                           labelId="processor"
                           id="processor"
                           value={this.state.selectedProcessors}
                           name={'selectedProcessors'}
                           onChange={this.handleMultiselectChange}
                           label="Select Hardware Platforms"
                           // className={classes.selectBox}
                           classes={{root:classes.selectBox}}
                           renderValue={(selected) => {
                              let names = selected.map(selectedId => {
                                 return this.state.processorList[
                                    this.state.processorList.findIndex(
                                       (processor) => {
                                          return processor.id === selectedId
                                       })
                                    ].nameText
                              })
                              return names.join(', ')
                           }}

                        >
                           {this.state.processorList.map((processor, index) => {
                              return (
                                 <MenuItem key={index} value={processor.id}>
                                    <MainThemeCheckbox
                                       checked={this.state.selectedProcessors.indexOf(processor.id) > -1}
                                    />
                                    <ListItemText primary={processor.selectElement}/>
                                 </MenuItem>
                              )
                           })}
                        </Select>
                     </FormControl>

【问题讨论】：

试试这个stackoverflow.com/questions/52615530/…
感谢 Chris，但我认为更好的解决方案是使用 ThemeProvider 并更改选择元素的原色。非常感谢您在我发布问题后立即提供的帮助

标签： javascript css reactjs react-redux material-ui

【解决方案1】：

实现这一点的最佳方法是在 Theme 对象中编辑特定的通用颜色（例如，Primary、Secondary），并通过将下拉菜单包装在 ThemeProvider 元素中并将主题对象设置为编辑值

【讨论】：

【解决方案2】：

您可以使用一些 CSS 或组件样式技巧来更改主要颜色，但推荐的方法是 theming your project 并选择您的调色板作为主要颜色和次要颜色。

您可以使用this 等工具来创建和测试您的主题，并且您可以在一个项目中拥有多个主题。

【讨论】：