以下步骤可以解决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@'},
{'name':'jimmy','gender':'male','email':'jimmysdf@'},
{'name':'ella','gender':'female','email':'eela@'},
{'name':'link','gender':'male','email':'khxdfskjs@'},
{'name':'po','gender':'male','email':'po@'},
{'name':'skula','gender':'female','email':'sdfsf@'},
{'name':'林梦','gender':'male','email':'khkjs@'},
{'name':'kasla','gender':'male','email':'kalsd@'},
{'name':'朱凯','gender':'female','email':'tennis@'},
{'name':'jack','gender':'male','email':'jack@'},
{'name':'流行语','gender':'male','email':'jimmysdf@'},
{'name':'ella','gender':'female','email':'eela@'},
{'name':'李虎','gender':'male','email':'khxdfskjs@'},
{'name':'po','gender':'male','email':'po@'},
{'name':'skula','gender':'female','email':'sdfsf@'},
{'name':'美优','gender':'male','email':'khkjs@'},
{'name':'kasla','gender':'male','email':'kalsd@'},
{'name':'tennis','gender':'female','email':'tennis@'},
];
export class MyTable2 extends ponent {
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;
