选择选项时如何避免 Material UI 选择焦点？

Question

我正在尝试使用Material UI 组件库中的Select和制作一个界面Input。我希望我的 UI/UX 的当前行为按以下顺序显示：1. 用户从Select元素 2 中选择选项。Input当用户从中选择某些内容时将聚焦Select

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

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

我怎么能做到这一点？谢谢。

PS 另外，我发现该错误Select行为还有另一个问题，请查看我的 github 帖子以了解详细信息。( https://github.com/mui-org/material-ui/issues/11964 )

Answer 1

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

1) 在您的组件上导入 MuiThemeProvider 和 createMuiTheme：

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,
    },
},