React antd에 스타일이 없으면 어떻게 해야 하나요?

React antd에는 스타일 솔루션이 없습니다. 1. "@import '~antd/dist/antd.css';"와 같이 프로젝트의 가장 바깥쪽 구성 요소에 antd 스타일 패키지를 도입합니다. 2. webpack에 "[를 도입합니다. 구성 'import', { libraryName: 'antd', 스타일: 'css' }],".

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

react antd에 스타일이 없으면 어떻게 해야 하나요?

리액트 프로젝트에 도입된 antd 컴포넌트에 스타일이 없는 문제

분명히 antd 스타일 파일이 도입되지 않았습니다. 이를 해결하는 방법은 두 가지가 있습니다.

1 가장 바깥쪽에 antd 스타일 패키지를 도입합니다. 프로젝트의 구성 요소

추가

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

2와 같이 Webpack 구성은 App.css

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 video tutorial"

위 내용은 React antd에 스타일이 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!