Javascript 如何自定义 Ant.design 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48620712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize Ant.design styles
提问by Dmitry
Who knows how to customize Ant.design styles in proper way?
谁知道如何以正确的方式自定义 Ant.design 样式？
For example, I want to change the default backgroundColor and height of Header section:
例如，我想更改 Header 部分的默认 backgroundColor 和高度：
import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
export default class Login extends Component {
render () {
return (
<div>
<Layout>
<Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
<Layout>
<Content>main content</Content>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
)
}
}
Is it ok, or there is a better way to customize styles? Because I have not found some component's attributes or smth. like this.
可以吗，或者有更好的自定义样式的方法？因为我还没有找到一些组件的属性或 smth。像这样。
采纳答案by Yichaoz
Antd has externized most of their styling variable in LESS variables
Antd 已经在 LESS 变量中外部化了大部分样式变量
as you can see in
正如你所看到的
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
To be able to overwrite those variables you need to use modifyVarfunction from LESS
为了能够覆盖这些变量，您需要使用modifyVarLESS 中的函数
you can find more about theming here
So to your specific question, @layout-header-backgrounddoes the job
所以对于你的具体问题，@layout-header-background工作
回答by Lowla
My personal approach (I'm working with dva-cli though):
我的个人方法（不过我正在使用 dva-cli）：
Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:
每次我需要覆盖 CSS 时，我都会使用位于同一文件夹中的 CSS 文件并将其导入，例如：
your-component.js:
你的component.js：
import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
your-stylesheet.css:
your-stylesheet.css：
.thestyle {
background-color: '#555555';
}
回答by jayanes
In the less file(like a css) you can handle customize styles. For example in your case
在 less 文件（如 css）中，您可以处理自定义样式。例如在你的情况
.ant-layout-header{ height: 100vh;
background-color:#f50;
}
If you use Ant card
如果您使用蚂蚁卡
.ant-card-head{color:#j14}
I hope you can understand now
我希望你现在能明白
回答by Chathuranga Kasthuriarachchi
This is how i customized the default antd styles in a particular component
这就是我在特定组件中自定义默认 antd 样式的方式
In scss or less
在 scss 或更少
.booking_information_table {
:global {
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 0 0 !important;
background-color: unset;
border: none;
overflow-wrap: break-word;
}
}
In return
作为回报
<Table
dataSource={bookingInformationDataSource}
columns={bookingInformationColumns}
pagination={false}
className={style.booking_information_table}
/>
回答by afc163
Override the component style
覆盖组件样式
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
由于项目的特殊需要，我们经常会遇到需要覆盖组件样式的情况，这里举一个简单的例子。
回答by Tania Shulga
The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go dipper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.
由于样式嵌套优先级，上述方法适用于 Header 等简单组件，但并不总是适用于 Menu、Tabs、Collapse、Select 等复杂组件。在工作中，我们使用 jayanes 描述的方法，但我们深入到嵌套的 Ant Design 类中。让我在下面的例子中解释一下：当您从“antd”导入 Tabs 时，您只有 2 个标签可以覆盖样式：Tabs 和 TabPane。
<div className={styles.tabsContainer}>
<Tabs className={styles.tabs}>
<TabPane className={styles.tabPane}>
Tab 1 Title
</TabPane>
</Tabs>
</div>
But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others. The way to go is: in your less file nest the .ant-... classes inside your own parent component's className(in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:
但是这个antd组件结构非常复杂。您可以在开发工具中进行验证：它有 .ant-tabs-bar、.ant-tabs-nav-container、.ant-tabs-tab-prev、.ant-tabs-tab-next、.ant-tabs-nav- wrap、.ant-tabs-nav-scroll、.ant-tabs-tab-active、.ant-tabs-ink-bar 等。要走的路是：在你的 less 文件中，将 .ant-... 类嵌套在你自己的父组件的 className 中（以避免在代码编译后覆盖整个应用程序中的所有 antd 类）。在那里写你自己的 css 属性，例如：
.tabsContainer {
.ant-tabs-tab-active {
background: #fff266;
color: #31365c;
&:hover {
color: darken(#31365c, 5%);
}
}
.ant-tabs-ink-bar {
background: #fff266;
}
}
If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.
如果您还需要更详细的解释，请参考我在 YouTube 上发布的关于如何自定义 Ant Design 组件 - 选项卡的视频。
