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中文網其他相關文章！