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

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 (
      <div>
        <div className="antdStyleReset">
          <NavBar
            mode="light"
            className={style.nav1}
            styleName = 'nav2'
            style={{color: 'red'}}
            prefixCls="antdStyleReset-navbar"
            icon={<Icon type="left" />}
            onLeftClick={() => console.log('onLeftClick')}
            rightContent={[
              <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
              <Icon key="1" type="ellipsis" />,
            ]}
          >NavBar</NavBar>
        </div>
        
        <Button  className={style.button} style={{color: 'red'}}>test1</Button>
      </div>
    )
  }
}

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

我嘗試在引用的組件中利用className、styleName、style來自定義組件的樣式，可是存在不少問題，好比

1. 設置的樣式有可能被組件中權重更高的樣式覆蓋不起做用
2. 設置的樣式不能精確指定到組件中某一個元素

還有的童鞋說定義styleName等於NavBar組件默認的類名好比styleName = "am-navbar-left",這種方法也存在不少問題，好比

1. 好比定義am-navbar-left是想重置NavBar組件內部的某個元素的樣式，這種作法只會將給類名設置到外層元素，不能設置到內層的元素

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

根據上面的案例，總結相關步驟是

1. 自定義類名prefixCls="antdStyleReset-navbar",我推薦定義方式是組件名+antd的組件名
2. 將相關的樣式node_modules/antd-mobile/lib/nav-bar/style/index.css複製到antdStyleReset組件對應的樣式antdStyleReset.scss中
3. 全局替換am-navbar爲antdStyleReset-navbar
4. 更改相關元素類名的樣式就能夠了