【速看料】react antd没有样式怎么办

时间:2022-12-28 11:10:43       来源:PHP中文网


(资料图片)

本教程操作环境: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中文网其它相关文章!

关键词: 相关文章 视频教程