javascript - 如何更改 ant-design 选项卡的默认边框颜色
问题描述
我无法更改 antd Tabs的默认边框颜色。
不知何故,我能够做到这一点,但它没有响应,需要更多时间。它搞砸了手机屏幕等。
...
/* rest of css in codesandbox, https://codesandbox.io/s/so-change-antd-tabs-default-border-color-40gmb?file=/index.css */
...
.ant-tabs-content-holder {
border-width: 1px;
border-color: grey;
border-style: solid;
padding: 1rem;
background: white;
position: relative;
}
.ant-tabs-content-holder:after {
padding: 0;
margin: 0;
display: block;
content: '';
height: 1.1px;
position: absolute;
top: -1px;
left: 0%;
width: 24.8%;
background-color: white;
}
这是它在移动屏幕上的外观。我想我可以为不同的屏幕宽度使用许多断点并更改和的百分比,但这left
很乏味。width
.ant-tabs-content-holder:after
如何以更简单的方式实现这一目标?任何的想法?是否有任何vars
我可以与 webpack 一起使用的选项卡边框的ant 设计less
?antd docs 有样式道具吗?我会感谢你的帮助。
签出代码:codesandbox
解决方案
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab { /* For tabs border */
border-color: black;
}
.ant-tabs-top > .ant-tabs-nav::before { /* For the line to the right and close to the tabs */
border-color: black;
}
.ant-tabs > .ant-tabs-nav { /* So that there is no gap between the content and tabs */
margin-bottom: 0;
}
.ant-tabs-content-holder {
padding: 15px;
border: 1px solid black; /* Border for the content part */
border-top: transparent; /* Remove the top border so that there is no overlap*/
}
您只需要覆盖以上 4 个类即可实现您的布局:
输出:
推荐阅读
- machine-learning - 为什么实际使用 theta*X 而不是 theta'*X?
- jquery - 如何将参数添加到post方法的ajax调用中
- c - 为什么 Windows 上的 MinGW 不需要静态链接?
- actionscript-3 - 在 Adobe Animate 中从矢量保存高分辨率位图
- batch-file - XCOPY 命令在 Windows XP 批处理文件中有效,但在 Windows 7 Pro 批处理文件中无效
- reactjs - 当 url 匹配相同的路由时,React 路由器不会重新加载页面
- python - 当浏览器给出 404 时,python 库中的请求模块给出的状态代码为 200
- entity-framework-6 - EF6 先查询内存使用情况
- java - 具有列表参数内容的 Mockito 模拟对象
- reactjs - 制服:创建自定义字段