react学习七：ant design的简单使用

  • Z时代
  • 2024-01-10
  • 分类：综合

react

ant design官网

安装包：

npm install antd --save

导入包：

import { DatePicker } from 'antd'

引入样式：

import 'antd/dist/antd.css';

引入样式的时候要注意一个问题，是不是在webpack的配置文件中使用了css模块化，如果使用了css模块化，那么这个引入的样式还是会起不了作用，所以在这种要引入第三方UI组件样式表文件的情况下，最好不要为 .css 后缀名的文件（因为第三方UI组件样式表文件都是以 .css 结尾的）启用 模块化，但是我们自己写的样式文件需要使用css模块化，这种情况下我们自己不要直接手写 .css 的文件，而是自己手写 scss 或 less 文件，这样，我们只需要为 scss 文件 或 less 文件启用模块化就好了

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]', 'sass-loader'] }

由于 直接使用 Ant Design 的全部包，体积过大，所以使用按需导入，这样能减少 bundle.js 文件的体积

在.babelrc文件的plugins数组中添加：

["import", { "libraryName": "antd", "style": "css" }]

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime", ["import", { "libraryName": "antd", "style": "css" }]]
}

然后只需从 antd 引入模块即可，无需单独引入样式

以上是 react学习七：ant design的简单使用 的全部内容， 来源链接： utcz.com/z/382927.html

回到顶部