Home  >  Article  >  Web Front-end  >  What should I do if react antd has no style?

What should I do if react antd has no style?

藏色散人
藏色散人Original
2022-12-28 11:19:592069browse

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' }],".

What should I do if react antd has no style?

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn