如何避免材料UI在选择选项时选择焦点?

Question

我正在尝试使用一对Select和材料UI组件库中的Input制作界面。我希望我的 UI/UX 的当前行为按下一个顺序排列： 1. 用户从Select元素中选择选项 2. 当用户从Select中选择某些内容时，Input将集中精力

你可以看到它是如何工作的(见第二Select，因为第一个是原生Select，不适合我的目的(： https://codesandbox.io/s/l4nq3pjjrm

上面示例中的第一个效果很好，但我需要非原生变体。

我该怎么做？ 谢谢。

附言另外，我发现这种错误的Select行为还有另一个问题，请查看我的 github 帖子以获取详细信息。(https://github.com/mui-org/material-ui/issues/11964(

Answer 1

因此，如果您的问题是选择值后的焦点，请尝试以下操作：

1(导入MuiThemeProvider并在您的组件上创建MuiTheme：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

2(然后在导入后添加以下代码行(覆盖css(：

const theme1 = createMuiTheme({
overrides: {
MuiSelect: {
select: {
"&:focus": {
background: "$labelcolor"
}
}
}
}
});

3(对于最后一步，使用以下代码包装要编辑的组件：

<MuiThemeProvider theme={theme1}>
// Your Component here
</MuiThemeProvider>

我在这里将其应用于您的代码

Answer 2

由于某种原因，最高答案对我不起作用。对于其他面临这种情况的人，您也可以这样做：

className: {
"& .MuiSelect-select:focus": {
backgroundColor: white,
},
},