怎样重写Ant Design的样式？

原文地址：http://www.hxstrive.com/article/639.htm

 

下面将通过修改Ant Design中的Table样式来说明怎样去自定义样式，假如我们的项目（React/Vue等）使用less编写样式，有一个myDemo.less文件。

 

1、将Table定义一个class属性，如下：
import React, { Component } from 'react';
import styles from './myDemo.less';
import { Table } from 'antd';
 
class Demo extends Component {
    render {
        return (
            <Table className={styles.myTable}></Table>
        );
    }
}

2、使用浏览器的DOM资源管理器查看Ant Design Table组件的结构，如下图：

 

找到我们需要修改的元素，这里我们打算修改如下元素：
<div class="ant-table-body"></div>

3、修改样式
// myDemo.less
// 下面方式无效
.myTable {
    .ant-table-body {
        background: red !important;
    }
}
 
// 下面方式有效
.myTable {
    div[class='ant-table-body'] {
        background: red !important;
    }
}
上面这些经过亲测，可行的…………