react 中使用 antd 主题例子

♦ 定义一个样式变量对象，将其存到一个js文件里，然后抛出

const styles = {
  '@table-bg': '#FF0000',
  '@primary-color': '#FF0000',
  '@link-color': '#FF0000',
  '@success-color': '#FF0000',
  '@warning-color': '#FF0000',
  '@error-color': '#FF0000',
  '@font-size-base': '14px'
}

module.exports = {
  styles
}

♦ 在webpack配置文件里面，引入，放到对应位置

const { styles } = require('./src/styles/theme')

const { 
  addWebpackAlias, 
  addLessLoader, 
  fixBabelImports, 
  override, 
  addDecoratorsLegacy 
} = require('customize-cra')
const path = require('path')

module.exports = override(
  // @ 修饰器
  addDecoratorsLegacy(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // 支持 less sass stylus
    style: true,
  }),
  // 支持 antd 主题定制
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: styles //样式变量对象放到这里
  }),
  // 别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@@': path.resolve(__dirname, 'src/components'),
  })
)

♦ 最后根据你样式变量对象的内容，引入对应的组件

 

posted on 2020-06-19 10:35  风闲啊  阅读(575)  评论(0)  编辑  收藏  举报

导航