怎样重写Ant Design的样式？

下面将通过修改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;
    }
}

上面这些经过亲测，可行的…………