实质性UI选项卡会覆盖重点不起作用的

问题描述

我正在开发一个React应用，并使用Material UI作为样式库。它运行良好，但是我无法在代码中的tab（按钮）组件周围打开蓝色轮廓（参见图片）

我可以使用button:focus { /* turning off outline props*/}

在控制台中将其关闭

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

  root: {
    
    ...

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

然后

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

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


buttonFocus: {

    outline: "none !important"
  }

很明显，我在做一些愚蠢的事情。请帮忙。

解决方法

Ciao，您必须将primary或secondary颜色与材质ui一起使用以设置轮廓颜色。

让我们说您拥有Button组件：

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

如您所见，我使用variant="outlined"勾勒出按钮的轮廓，然后将颜色设置为"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>
   );
 }

如果其他人有此问题，我添加

  *:focus {
    outline: none !important;
}

到我的app.css文件中，以覆盖Material UI中的所有样式更改。谢谢您的帮助和建议

material-ui reactjs reactjs