What should I do if react antd has no style?

React antd has no style solution: 1. Introduce the antd style package into the outermost component of the project, such as "@import '~antd/dist/antd.css';"; 2. Configure in webpack Introduced "['import', { libraryName: 'antd', style: 'css' }],".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if react antd has no style?

The react project introduces the problem that the antd component has no style

It is obvious that the antd style file is not introduced. There are two ways to solve it:

1.Introduce antd style package into the outermost component of the project

For example, add

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

at the top of App.css 2.Introduce webpack configuration

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'
        })
    ]
}

Recommended learning ：《react video tutorial》

The above is the detailed content of What should I do if react antd has no style?. For more information, please follow other related articles on the PHP Chinese website!