英文:
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: '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;
}`
My 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 link
https://codesandbox.io/s/lucid-northcutt-3f617h?file=/src/App.js
答案1
得分: 2
如果您移除react-tabs__tab--selected
类的背景颜色,并覆盖react-tabs_tab:focus:after
的content
属性,它应该按预期工作。最终的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;
}
英文:
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: "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
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论