react antd没有样式如何解决

本篇内容主要讲解“react antd没有样式如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react antd没有样式如何解决”吧!

react antd没有样式的解决办法：1、在项目最外层组件引入antd样式包，方式如“@import '~antd/dist/antd.css';”；2、在webpack配置中引入“ ['import', { libraryName: 'antd', style: 'css' }],”。

react项目引入antd组件没有样式的问题

明显是antd的样式文件没有引入进来，有两种方式解决：

在项目最外层组件引入antd样式包

如在App.css中最上面加

@import '~antd/dist/antd.css';

webpack配置引入

module.exports = {    entry: {        index: path.join(class="lazy" data-srcPath, 'index.js'),    },    module: {        rules: [            // babel-loader            {                test: /\.(js|jsx)$/,                loader: ['babel-loader?cacheDirectory'],// 开启缓存                include: class="lazy" data-srcPath,                // exclude: /node_modules/                loader: require.resolve('babel-loader'),                options: {                    plugins: [                        // 引入样式为 css                        // style为true 则默认引入less                        ['import', { libraryName: 'antd', style: 'css' }],                    ]                }            }        ]    },    plugins: [        new HtmlWebpackPlugin({            template: path.join(class="lazy" data-srcPath, 'index.html'),            filename: 'index.html'        })    ]}

到此，相信大家对“react antd没有样式如何解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！