react-tabs 中的自定义样式似乎不起作用。底部边框消失，一旦选择了选项卡

问：

我正在为我的项目使用 react-tabs （https://github.com/reactjs/react-tabs）。我想在此基础上添加自定义样式。但是样式似乎无法正常工作

预期内容：预期输出 - 没有问题

我得到的问题是什么

一旦选项卡更改，底部边框就会消失。我想这是因为

.react-tabs__tab:focus { outline: none; }

我怎样才能解决这个问题？这是我现在的 SCSS `

.react-tabs__tab {
    font-family: 'Spoqa Han Sans Neo';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #999999;
}

.react-tabs__tab--selected{
    background: #fff;
    color: black;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    padding-bottom: 18px;
    border-bottom: 3px solid #075453;
    font-family: 'Spoqa Han Sans Neo';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #333333;
}`

我的 jsx

import React from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import './membersTabularView.scss';
const MembersTabularView = () => {
    return ( 
            <Tabs  >
                <TabList> 
                    <Tab>1</Tab>
                    <Tab>2</Tab>
                    <Tab>3</Tab>
                </TabList>

                <TabPanel>
                    <h2>Any content 1</h2>
                </TabPanel>
                <TabPanel>
                    <h2>Any content 2</h2>
                </TabPanel>
                <TabPanel>
                    <h2>Any content 3</h2>
                </TabPanel>
            </Tabs> 
    );
};

export default MembersTabularView;

沙盒链接 https://codesandbox.io/s/lucid-northcutt-3f617h?file=/src/App.js