Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

huangapple go评论54阅读模式
英文:

Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

问题

我正在使用 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;

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

英文:

I am using react-tabs (https://github.com/reactjs/react-tabs) for my project. I want to add custom styling on top of that. But the styles seems not working properly

What is expected: Expected output - without issues

What I get screen with the issue

As soon as the tabs change the bottom border goes away. I guess it's because of

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

How can I fix this issue ? This is my current SCSS
`

.react-tabs__tab {
    font-family: &#39;Spoqa Han Sans Neo&#39;;
    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: &#39;Spoqa Han Sans Neo&#39;;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #333333;
}`

My jsx

import React from &#39;react&#39;;
import { Tabs, TabList, Tab, TabPanel } from &#39;react-tabs&#39;;
import &#39;react-tabs/style/react-tabs.css&#39;;
import &#39;./membersTabularView.scss&#39;;
const MembersTabularView = () =&gt; {
    return ( 
            &lt;Tabs  &gt;
                &lt;TabList&gt; 
                    &lt;Tab&gt;1&lt;/Tab&gt;
                    &lt;Tab&gt;2&lt;/Tab&gt;
                    &lt;Tab&gt;3&lt;/Tab&gt;
                &lt;/TabList&gt;

                &lt;TabPanel&gt;
                    &lt;h2&gt;Any content 1&lt;/h2&gt;
                &lt;/TabPanel&gt;
                &lt;TabPanel&gt;
                    &lt;h2&gt;Any content 2&lt;/h2&gt;
                &lt;/TabPanel&gt;
                &lt;TabPanel&gt;
                    &lt;h2&gt;Any content 3&lt;/h2&gt;
                &lt;/TabPanel&gt;
            &lt;/Tabs&gt; 
    );
};

export default MembersTabularView;

sandbox link
https://codesandbox.io/s/lucid-northcutt-3f617h?file=/src/App.js

答案1

得分: 2

如果您移除react-tabs__tab--selected类的背景颜色,并覆盖react-tabs_tab:focus:aftercontent属性,它应该按预期工作。最终的SCSS类如下所示:

.react-tabs__tab--selected {
    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;
}

.react-tabs__tab:focus:after {
    content: none;
}

Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

英文:

If you remove the background colour in the react-tabs__tab--selected class and override the react-tabs_tab:focus: after content property, it should work as intended. The final SCSS class is shown below.

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

 .react-tabs__tab:focus:after{
  content:none
  }

Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

huangapple
  • 本文由 发表于 2023年3月1日 12:44:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/75599653.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定