antd源码解析——在线换肤功能

琐碎的前言

组内需要搭建一个内部组件演示平台，就去研究了下ant-design的源码。意外发现了藏在最下方友情链接栏中的换肤功能。如下图所示：

为了方便演示，我把colorpicker的position改为fixed

colorpicker

调用方式

<ColorPicker
    type="sketch"
    small
    color={color}
    position="top"
    presetColors={[
    '#F5222D',
    '#EB2F96',
    ...
    ]}
    onChangeComplete={this.handleColorChange}
/>

事件监听

下面是监听colorpicker的onChangeComplete事件的回调

handleColorChange = (color) => {
    const changeColor = () => {
      const { intl: { messages } } = this.props;
      window.less.modifyVars({ // 关键步骤，修改less颜色变量值
        '@primary-color': color,
      }).then(() => {
        message.success(messages['app.footer.primary-color-changed']); // 通知换肤成功
        this.setState({ color }); // 回填颜色值
      });
    };

    const lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js';

// lessLoaded 用来标志 less.js 是否已加载，没有则去请求
    if (this.lessLoaded) {
      changeColor();
    } else {
      window.less = {
        async: true, // 设为异步加载
      };
      loadScript(lessUrl).then(() => {
        this.lessLoaded = true;
        changeColor();
      });
    }
  }

elements

color.less中就存放了less颜色变量（@primary-color），每次修改颜色后都会去重置对应less变量，编译出新的css样式

less.modifyVars()

官网解释：Enables run-time modification of Less variables. When called with new values, the Less file is recompiled without reloading.

换肤最关键的一步就是less.modifyVars()的调用，主要是针对less变量的修改覆盖。用法如下:

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

更多less用法 参考