antd design 引用样式不生效问题

以下步骤可以解决antd样式不生效的问题

1. 在App.css文件中最上面加上@import '~antd/dist/antd.css';

2. 执行npm i babel-plugin-import安装插件。

3. 执行npm run eject 暴露 webpack 配置。

4. 将package.json配置中关于babel的改下以下内容：

"babel":{

"presets":["react-app"],

"plugins":[

[

"import",{

"libraryName":"antd",

"libraryDirectory":"es",

"style":"css"

}

]

]

}

下面是我测试的源码：MyTable2.jsx文件。然后在index.js中将App替换成Mytable2即可。

import React from "react";

import { Table } from 'antd';

const columns = [

    {title: 'Name',dataIndex: 'name',sorter: true, align:'center',width: '20%',},

    {title: 'Gender', dataIndex: 'gender',align:'center',

    filters: [ { text: 'Male', value: 'male' },{ text: 'Female', value: 'female' },],width: '20%',},

    { title: 'Email',dataIndex: 'email',},

  ];

  const dataList = [

        {'name':'jack','gender':'male','email':'jack@lkl.com'},

        {'name':'jimmy','gender':'male','email':'jimmysdf@lkl.com'},

        {'name':'ella','gender':'female','email':'eela@lkl.com'},

        {'name':'link','gender':'male','email':'khxdfskjs@lkl.com'},

        {'name':'po','gender':'male','email':'po@sc.com'},

        {'name':'skula','gender':'female','email':'sdfsf@lkl.com'},

        {'name':'林梦','gender':'male','email':'khkjs@lkl.com'},

        {'name':'kasla','gender':'male','email':'kalsd@lkl.com'},

        {'name':'朱凯','gender':'female','email':'tennis@lkl.com'},

        {'name':'jack','gender':'male','email':'jack@lkl.com'},

        {'name':'流行语','gender':'male','email':'jimmysdf@lkl.com'},

        {'name':'ella','gender':'female','email':'eela@lkl.com'},

        {'name':'李虎','gender':'male','email':'khxdfskjs@lkl.com'},

        {'name':'po','gender':'male','email':'po@sc.com'},

        {'name':'skula','gender':'female','email':'sdfsf@lkl.com'},

        {'name':'美优','gender':'male','email':'khkjs@lkl.com'},

        {'name':'kasla','gender':'male','email':'kalsd@lkl.com'},

        {'name':'tennis','gender':'female','email':'tennis@lkl.com'},

        ];

export class MyTable2 extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

           

        };

      }

      componentDidMount() {

      }

    render() {

    return (

        <div style={{'width':'100%','textAlign':'center'}}>

            <hgroup style={{height:100}}/>

            <hgroup style={{'marginTop':'100','textAlign':'center','align':'center',}}>

                <Table

                style={{'width':'800px','textAlign':'center'}}

                columns={columns}

                dataSource={dataList}

                pagination={true}

            />

            </hgroup>

           

        </div>

    );

    }

}

export default MyTable2;