使用 NutUI 搭建「自定义业务风格」的组件库 | 京东云技术团队

作者：京东零售 佟恩

本文介绍，如何使用 NutUI 组件库，搭建一套为专属业务风格的业务组件库。

NutUI 是一款京东风格的移动端组件库。NutUI 目前支持 Vue 和 React技术栈，支持Taro多端适配。

当下的实现方式

一般组件库，都会给用户提供修改主题的方式。比如在 NutUI 组件库中，给用户提供了两种方式：

• 修改CSS变量，NutUI 组件库支持通过全局配置组件 ConfigProvider 组件完成主题定制；

const customTheme = {
  nutuiBadgeBorderRadius: '12px 12px 12px 0',
}

<ConfigProvider theme={customTheme}>
  <Badge value="NEW">
    <Avatar icon="my" shape="square" />
  </Badge>
</ConfigProvider>

• 通过SCSS 变量，NutUI 组件库提供通过编写一套自定义主题的样式文件，直接覆盖现有样式文件，完成主题定制。

// 新建一个 SCSS 文件 custom_theme.scss 进行自定义
// 主色调
$primary-color: #478EF2;
$primary-color-end: #496AF2;

// vue 版本
{
  test: /\.(sa|sc)ss$/,
  use: [
    {
      loader: 'sass-loader',
      options: {
        // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass