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

Question

我正在尝试使用 Material UI 组件库中的一对 Select 和 Input 创建接口。我想要我的 UI/UX 的当前行为在下一个顺序中： 1. 用户从 Select 元素中选择了选项 2. 当用户从 Select

中选择某项时，Input 将获得焦点

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

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

我该怎么做？谢谢。

P.S。此外，我发现错误的 Select 行为还有其他问题，请查看我的 github post 了解更多详情。 (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>

我在你的代码中应用了它here

Answer 2

出于某种原因，最佳答案对我不起作用。对于遇到此问题的任何其他人，您也可以这样做：

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

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

How to avoid Material UI Select focus when option is chosen?

element

reactjs

material-design