成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

FrozenMap / 3934人閱讀

antd-mobile 引入css的樣式的兩種方式 在入口處引入樣式 
// 一般入口文件是index.js
import "antd-mobile/dist/antd-mobile.css";  // or "antd-mobile/dist/antd-mobile.less"

或者下面這種方式引入樣式

和上面的方法不同的地方就是，上面是直接從包文件的路徑中引入樣式，這個(gè)方法是將安裝包里面lib目錄下的antd-mobile.css復(fù)制到項(xiàng)目中指定的文件夾下（如style文件夾）

這樣做的有點(diǎn)是可以在打包的時(shí)候編譯指定文件夾下面的css

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

但是上面兩種引入樣式的做法都不能做到按需加載，antd內(nèi)部會(huì)在瀏覽器的控制臺提示警告，并推薦安裝babel-plugin-import

利用babel-plugin-import

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

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 會(huì)加載 less 文件
  ]
}

然后只需從 antd-mobile 引入模塊即可，無需多帶帶引入樣式。

// babel-plugin-import 會(huì)幫助你加載 JS 和 CSS
import { DatePicker } from "antd-mobile";

手動(dòng)引入

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

注意使用按需加載時(shí)，樣式是直接引用node-modules中的樣式，所以css-loader的配置里面不能在用類似上面的配置, 去掉include的配置，否則不能編譯node-modules下面的css樣式，會(huì)報(bào)錯(cuò)

{
  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來自定義組件的樣式，但是存在很多問題，比如

設(shè)置的樣式有可能被組件中權(quán)重更高的樣式覆蓋不起作用

設(shè)置的樣式不能精確指定到組件中某一個(gè)元素

還有的童鞋說定義styleName等于NavBar組件默認(rèn)的類名比如styleName = "am-navbar-left",這種方法也存在很多問題，比如

比如定義am-navbar-left是想重置NavBar組件內(nèi)部的某個(gè)元素的樣式，這種做法只會(huì)將給類名設(shè)置到外層元素，不能設(shè)置到內(nèi)層的元素

所以我推薦使用prefixCls來自定義組件，雖然這種方式比較笨拙，但是可以很好的解決上面的問題

根據(jù)上面的案例，總結(jié)相關(guān)步驟是

自定義類名prefixCls="antdStyleReset-navbar",我推薦定義方式是組件名+antd的組件名

將相關(guān)的樣式node_modules/antd-mobile/lib/nav-bar/style/index.css復(fù)制到antdStyleReset組件對應(yīng)的樣式antdStyleReset.scss中

全局替換am-navbar為antdStyleReset-navbar

更改相關(guān)元素類名的樣式就可以了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90382.html

相關(guān)文章

  • 用Browserify構(gòu)建antd-mobile應(yīng)用

    摘要：但在中，這一問題該如何解決呢使用遇到的問題如何自定義模塊文件后綴名的優(yōu)先級和一樣，也提供了一個(gè)叫的配置選項(xiàng)，用于設(shè)定模塊文件的后綴名及其優(yōu)先級。 antd-mobile是螞蟻金服出的移動(dòng)端設(shè)計(jì)指南和前端框架，它提供了一套基于React的移動(dòng)端組件庫，可以很方便地用來開發(fā)體驗(yàn)良好的移動(dòng)應(yīng)用。 使用antd-mobile遇到的問題：react-native模塊找不到 在閱讀了antd-mo...

    tain335 評論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評論0 收藏0

  • 使用React和Node.js制作音樂類App的一次總結(jié)

    摘要：在通信時(shí)，如果要將返回的數(shù)據(jù)，那么請注意的同異步場景，準(zhǔn)確把控渲染和設(shè)置狀態(tài)時(shí)間差邏輯，特別是多個(gè)請求，可以使用或者在的回調(diào)函數(shù)中發(fā)送請求，定時(shí)器把控時(shí)間。 一、技術(shù)選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript作為開發(fā)語言，一開始嘗試使用TypeScript，但是由于是移動(dòng)端，antd-mobile的庫與TS有那么一些不兼容，官方文...

    edgardeng 評論0 收藏0

  • 使用React和Node.js制作音樂類App的一次總結(jié)

    摘要：在通信時(shí)，如果要將返回的數(shù)據(jù)，那么請注意的同異步場景，準(zhǔn)確把控渲染和設(shè)置狀態(tài)時(shí)間差邏輯，特別是多個(gè)請求，可以使用或者在的回調(diào)函數(shù)中發(fā)送請求，定時(shí)器把控時(shí)間。 一、技術(shù)選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript作為開發(fā)語言，一開始嘗試使用TypeScript，但是由于是移動(dòng)端，antd-mobile的庫與TS有那么一些不兼容，官方文...

    helloworldcoding 評論0 收藏0

  • 使用React和Node.js制作音樂類App的一次總結(jié)

    摘要：在通信時(shí)，如果要將返回的數(shù)據(jù)，那么請注意的同異步場景，準(zhǔn)確把控渲染和設(shè)置狀態(tài)時(shí)間差邏輯，特別是多個(gè)請求，可以使用或者在的回調(diào)函數(shù)中發(fā)送請求，定時(shí)器把控時(shí)間。 一、技術(shù)選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript作為開發(fā)語言，一開始嘗試使用TypeScript，但是由于是移動(dòng)端，antd-mobile的庫與TS有那么一些不兼容，官方文...

    kviccn 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<