Material ui 如何删除React material ui选项卡组件中的聚焦突出显示？

我正在使用react Material ui库中的选项卡组件。当tab元素处于焦点时，该选项卡会在左右边框上显示这个奇怪的轮廓

有没有办法删除此活动/焦点大纲

下面是一个奇怪的焦点造型问题的图像

我的代码如下：

import { Fragment } from 'react';
import styled from 'styled-components'
import Card from 'components/Elements/Card';
import CardItem from 'components/Elements/CardItem';
import CreateAccountForm from 'components/Forms/CreateAccount/container';
import { withTheme } from 'styled-components';
import { Container, Row, Col } from 'styled-bootstrap-grid';
import { pure } from 'recompact';

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';

import OpenModalButton from 'components/Modal/OpenModalButton/container';

const styles = theme => ({
  indicator: {
    backgroundColor: "red",
    border: '5px solid blue !important',
    '&:active': {
      outline: 'none',
    },
    '&:focus': {
      outline: 'none',
    }
  },
  selected: {
    backgroundColor: 'blue',
  },
  wrapper: {
    border: '5px solid blue',
  }
});

import { LogoElement } from 'components/Elements/Icons';

const StyledCard = styled(withTheme(Card))`
  border: 15px solid ${ props => props.theme.colors.blue[3]};
  text-align: left;
  border-radius: 3px;
  padding-top: ${ props => props.theme.spacer[2]};
  padding-bottom: ${ props => props.theme.spacer[2]};
  position: relative;
  width: 98%;
  max-width: 1250px;
  min-height: 600px;
  display: flex;
  align-items: flex-start;

  h5 {
    color: ${ ({ theme }) => theme.colors.orange[3]};
  }
`;

const CloseButton = styled.a`
  transform: rotate(45deg);
  font-size: 50px !important;
  border: none !important;
  position: absolute;
  top: -20px;
  right: 5px;
  color: ${ props => props.theme.colors.blue[3]} !important;
  font-weight: 200 !important;
  &:hover{
    text-decoration: none;
  }
`;

const LogoContainer = styled.div`
  position: absolute;
  top: 10px;
  left: 15px;
  width: 45px;
  height: 100%;

  svg, path, g, polygon, rect {
    fill: ${ props => props.theme.colors.orange[1]} !important;
  }
`;

const Renderer = ({ handleClose, className, classes, handleTabChangeClick }) => {
  return (
    <StyledCard>
      <CloseButton href="#" onClick={handleClose}>+</CloseButton>
      <CardItem>
        <Container>
          <Row>
            <Col>
              <Tabs
              variant="fullWidth"
              onChange={handleTabChangeClick}
              >
                <Tab label="Profile" />
                <Tab label="Activity" />
                <Tab label="Score" />
                <Tab label="Edit" />
              </Tabs>
            </Col>
          </Row>
        </Container>
      </CardItem>
    </StyledCard>
  );
};

export default withStyles(styles)(Renderer);

从'react'导入{Fragment}；
从“样式化组件”导入样式化
从“组件/元件/卡片”导入卡片；
从“组件/元素/CardItem”导入CardItem；
从“组件/表单/CreateAccount/container”导入CreateAccountForm；
从“样式化组件”导入{withTheme}；
从“样式化引导网格”导入{Container，Row，Col}；
从“重新压缩”导入{pure}；
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“组件/模式/OpenModalButton/container”导入OpenModalButton；
常量样式=主题=>({
指标：{
背景颜色：“红色”，
边框：“5px纯蓝！重要”，
“&：活动”：{
大纲：“无”，
},
“&：焦点”：{
大纲：“无”，
}
},
选定：{
背景颜色：“蓝色”，
},
包装器：{
边框：“5px纯蓝色”，
}
});
从“组件/元素/图标”导入{LogoElement}；
const StyledCard=已设置样式（带主题（卡片））`
边框：15px solid${props=>props.theme.colors.blue[3]}；
文本对齐：左对齐；
边界半径：3px；
填充顶部：${props=>props.theme.spacer[2]}；
填充底部：${props=>props.theme.spacer[2]}；
位置：相对位置；
宽度：98%；
最大宽度：1250px；
最小高度：600px；
显示器：flex；
调整项目：灵活启动；
h5{
颜色：${（{theme}）=>theme.colors.orange[3]}；
}
`;
const CloseButton=styled.a`
变换：旋转（45度）；
字体大小：50px！重要的；
边界：没有！重要的；
位置：绝对位置；
顶部：-20px；
右：5px；
颜色：${props=>props.theme.colors.blue[3]}！重要的；
字号：200！重要的；
&：悬停{
文字装饰：无；
}
`;
const LogoContainer=styled.div`
位置：绝对位置；
顶部：10px；
左：15px；
宽度：45px；
身高：100%；
svg、路径、g、多边形、矩形{
填充：${props=>props.theme.colors.orange[1]}！重要；
}
`;
常量呈现程序=（{handleClose，className，classes，handleTabChangeClick}）=>{
返回(
+
);
};
导出默认样式（样式）（渲染器）；

我也有同样的问题。尝试更改：

    '&:active': {
      outline: 'none',
    },

致：

---

我使用样式化组件覆盖材质ui样式，因此我的设置有点不同，但解决方案应该是相同的

您必须覆盖

Mui选择的
类

    '&.Mui-selected': {
      outline: 'none',                                                                   
    }

请参阅为选项卡定义的类。
这个答案为我指明了正确的方向。虽然没有那么灵活，但对我来说，我必须将其更改为
”&按钮：焦点“
”，因为
”和.Mui选择的“
没有更改结果。
    '&.Mui-selected': {
      outline: 'none',                                                                   
    }