材质 UI 选项卡覆盖焦点不起作用答案

【问题标题】：Material UI Tab overrides focused not working材质 UI 选项卡覆盖焦点不起作用
【发布时间】：2020-12-02 05:10:23
【问题描述】：

我正在开发一个 React 应用程序，并使用 Material UI 作为样式库。它运行良好，但我无法在代码中的选项卡（按钮）组件周围设置蓝色轮廓（见图）

我可以在控制台中使用 button:focus { /* turning off outline props*/} 将其关闭

但是在代码中覆盖样式对我不起作用，我已经尝试过

  root: {
    
    ...

    "& .MuiButtonBase-root" : {
      "& button:focused" :{
        
          outline: "none"
        
    }}

然后

overrides: {
    "& .MuiButtonBase-root" : {
      "& button:focused" :{
        
          outline: "none"
        
    }}
  }

并通过将类应用于组件来覆盖


buttonFocus: {

    outline: "none !important"
  }

显然我在做一些愚蠢的事情。请帮忙。

【问题讨论】：

请提供一个code sandbox 来重现您的问题。我不认为这个大纲来自 Material-UI——大概是你有一些全局样式导致了这个。在不知道这些样式规则是什么样子的情况下，很难帮助您成功覆盖它们。

标签： reactjs material-ui

【解决方案1】：

Ciao，你必须使用primary 或secondary 颜色和材质ui 来设置轮廓颜色。

假设你有你的 Button 组件：

<Button variant="outlined" color="primary">
   HOWELL DIBBERT
</Button>

如你所见，我使用variant="outlined" 勾勒按钮轮廓，然后将颜色设置为"primary"。初级是什么意思？ Primary 是我在Theme 中设置的颜色，如下所示：

export const Theme = {
    palette: {
        primary: {
            contrastText: '#FFFFFF',
            dark: '#0000FF',
            main: '#0000FF',
            light: '#0000FF',
        },
    }
};

最后将您的主题添加到您的应用中。在 App.js 文件中：

import { Theme } from 'path/to/your/Theme';
...
export default function App() {
   
   const theme = createMuiTheme(Theme);

   return (
      <ThemeProvider theme={theme}>
      ....
      </ThemeProvider>
   );
 }

【讨论】：

【解决方案2】：

如果其他人有这个问题，我补充说

  *:focus {
    outline: none !important;
}

到我的 app.css 文件以覆盖来自 Material UI 的任何样式更改。感谢您的帮助和建议

【讨论】：

除了，不要这样做。它破坏了可访问性。