antd-mobile按需加载样式和自定义样式

FrozenMap 发布于2019-08-21 18:21 / 3570人阅读

antd-mobile 引入css的样式的两种方式 在入口处引入样式

// 一般入口文件是index.js
import "antd-mobile/dist/antd-mobile.css";  // or "antd-mobile/dist/antd-mobile.less"

或者下面这种方式引入样式

和上面的方法不同的地方就是，上面是直接从包文件的路径中引入样式，这个方法是将安装包里面lib目录下的antd-mobile.css复制到项目中指定的文件夹下（如style文件夹）

这样做的有点是可以在打包的时候编译指定文件夹下面的css

{
  test: /.css$/,
  include: path.resolve(__dirname, "src/styles"),
  use: [
    "style-loader",
    "css-loader",
  ],
}

但是上面两种引入样式的做法都不能做到按需加载，antd内部会在浏览器的控制台提示警告，并推荐安装babel-plugin-import

利用babel-plugin-import

使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

然后只需从 antd-mobile 引入模块即可，无需多带带引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from "antd-mobile";

手动引入

import DatePicker from "antd-mobile/lib/date-picker";  // 加载 JS
import "antd-mobile/lib/date-picker/style/css";        // 加载 CSS
// import "antd-mobile/lib/date-picker/style";         // 加载 LESS

注意使用按需加载时，样式是直接引用node-modules中的样式，所以css-loader的配置里面不能在用类似上面的配置, 去掉include的配置，否则不能编译node-modules下面的css样式，会报错

{
  test: /.css$/,
  // include: path.resolve(__dirname, "src/styles"),
  use: [
    "style-loader",
    "css-loader",
  ],
}

自定义样式

import React,{Component} from "react";
import {Button, NavBar, Icon} from "antd-mobile";
import CreateCSSModules from "react-css-modules";
import style from "./antdStyleReset.scss";

class AntdStyleReset extends React.Component {

  render() {
    return (
      
        
          }
            onLeftClick={() => console.log("onLeftClick")}
            rightContent={[
              ,
              ,
            ]}
          >NavBar
        
        
        
      
    )
  }
}

export default CreateCSSModules(AntdStyleReset, style, {
  allowMultiple: true
})

我尝试在引用的组件中利用className、styleName、style来自定义组件的样式，但是存在很多问题，比如

设置的样式有可能被组件中权重更高的样式覆盖不起作用

设置的样式不能精确指定到组件中某一个元素

还有的童鞋说定义styleName等于NavBar组件默认的类名比如styleName = "am-navbar-left",这种方法也存在很多问题，比如

比如定义am-navbar-left是想重置NavBar组件内部的某个元素的样式，这种做法只会将给类名设置到外层元素，不能设置到内层的元素

所以我推荐使用prefixCls来自定义组件，虽然这种方式比较笨拙，但是可以很好的解决上面的问题

根据上面的案例，总结相关步骤是

自定义类名prefixCls="antdStyleReset-navbar",我推荐定义方式是组件名+antd的组件名

将相关的样式node_modules/antd-mobile/lib/nav-bar/style/index.css复制到antdStyleReset组件对应的样式antdStyleReset.scss中

全局替换am-navbar为antdStyleReset-navbar

更改相关元素类名的样式就可以了

云服务器超融合服务器自定义按钮样式 easyui加载样式加载css样式 html表格定义样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90382.html

用Browserify构建antd-mobile应用

摘要：但在中，这一问题该如何解决呢使用遇到的问题如何自定义模块文件后缀名的优先级和一样，也提供了一个叫的配置选项，用于设定模块文件的后缀名及其优先级。 antd-mobile是蚂蚁金服出的移动端设计指南和前端框架，它提供了一套基于React的移动端组件库，可以很方便地用来开发体验良好的移动应用。使用antd-mobile遇到的问题：react-native模块找不到在阅读了antd-mo...

tain335 2019-08-20 11:58 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
使用React和Node.js制作音乐类App的一次总结

摘要：在通信时，如果要将返回的数据，那么请注意的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用或者在的回调函数中发送请求，定时器把控时间。一、技术选型语言选择： JavaScript TypeScript 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文...

edgardeng 2019-08-02 16:12 评论0 收藏0
使用React和Node.js制作音乐类App的一次总结

摘要：在通信时，如果要将返回的数据，那么请注意的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用或者在的回调函数中发送请求，定时器把控时间。一、技术选型语言选择： JavaScript TypeScript 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文...

helloworldcoding 2019-08-23 16:49 评论0 收藏0
使用React和Node.js制作音乐类App的一次总结

摘要：在通信时，如果要将返回的数据，那么请注意的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用或者在的回调函数中发送请求，定时器把控时间。一、技术选型语言选择： JavaScript TypeScript 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文...

kviccn 2019-08-29 18:33 评论0 收藏0