react antd没有样式怎么办

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

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react antd没有样式怎么办？

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

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

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

如在App.css中最上面加

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

2.webpack配置引入

module.exports = {
    entry: {
        index: path.join(srcPath, 'index.js'),
    },
    module: {
        rules: [
            // babel-loader
            {
                test: /\.(js|jsx)$/,
                loader: ['babel-loader?cacheDirectory'],// 开启缓存
                include: 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(srcPath, 'index.html'),
            filename: 'index.html'
        })
    ]
}

推荐学习：《react视频教程》

以上就是react antd没有样式怎么办的详细内容，更多请关注php中文网其它相关文章！