Question

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

中选择某项内容时，Select将会被关注

您可以看到它的工作原理（请参阅第二个Select，因为第一个是本地Select，它不适合我的目的）： https://codesandbox.io/s/l4nq3pjjrm

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

我该怎么做？谢谢。

P.S。此外，我发现错误的Select行为还有其他问题，请查看我的github帖子以获取更多详细信息。（https://github.com/mui-org/material-ui/issues/11964）

Answer 1

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

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

Answer 2

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

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

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

2 个答案: