Reactjs 选择选项时，如何避免材料UI选择焦点？

我正在尝试使用一对从MaterialUI组件库中选择和输入的界面。我希望我的UI/UX的当前行为符合以下顺序： 1.用户从选择元素中选择了选项 2.当用户从Select中选择某个内容时，Input将被聚焦

您可以看到它的工作原理。请参见第二个选择，因为第一个选择是本机选择，不适合我的目的：

上面示例中的第一个非常有效，但我需要非本机变体

我怎么能做到？ 谢谢

---

另外，我发现错误的选择行为还有另一个问题，请查看我在github上发布的mo详细信息

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

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>

---

我在你的代码上应用了它，因为某种原因，上面的答案对我不起作用。对于其他面临此问题的人，您也可以这样做：

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

---

很酷，谢谢你，但是我不能测试你的方法，如果你可以的话，我们的社区提供一个小例子会很好。我编辑了我的答案，因为我在代码上犯了一个错误。我还将我的示例应用于您的代码，在我的答案的底部。我最好的回答是非常有用的，谢谢。一个注意事项-在最新的材料UI 4.5.x中，属性似乎已更改，您需要使用backgroundColor而不是backgroundColor。除此之外，它工作得很好！经过几个小时的研究，你救了我。我设法改变焦点的背景，你知道如何改变输入的边框吗？我不能让它和你一起工作，那么特异性呢？它不会覆盖默认样式而不使用！重要的旗帜。