React antd にスタイルがない場合はどうすればよいですか?

React antd にはスタイル ソリューションがありません: 1. プロジェクトの最も外側のコンポーネントに antd スタイル パッケージを導入します (例: "@import '~antd/dist/antd.css';"; 2. で構成します) webpack 「['import', { libraryName: 'antd', style: 'css' }],」が導入されました。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react antd にスタイルがない場合はどうすればよいですか?

#react プロジェクトでは、antd コンポーネントにスタイルがないという問題が発生します。

antd スタイル ファイルが導入されていないことは明らかです。方法は 2 つあります。それを解決するには:

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 中国語 Web サイトの他の関連記事を参照してください。