antd-mobile按需加載樣式和自定義樣式

FrozenMap 發布于2019-08-21 18:21 / 3873人閱讀

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

更改相關元素類名的樣式就可以了

云服務器 GPU云服務器自定義按鈕樣式 easyui加載樣式加載css樣式 html表格定義樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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