定制主题 🎨

根据产品的差异性,React Suite 在主题设计上提供灵活的可配置参数。

Light/Dark 主题

React Suite 默认提供了 Light 与 Dark 两套主题,您可以根据产品的需求或者操作的的环境使用不同主题样式。

☀️ Light

@import '~rsuite/lib/styles/themes/default/index.less';
// @import '~rsuite/dist/styles/rsuite-default.css' 或者引入 CSS

🌙 Dark

@import '~rsuite/lib/styles/themes/dark/index.less';
// @import '~rsuite/dist/styles/rsuite-dark.css' 或者引入 CSS

进行定制

React Suite 的样式使用了 Less 作为样式的预处理,并且定义了一系列的变量,可使用 Modify Variables 的方式进行定制化。包括但不限定于定制主题色、调整组件圆角半径、修改字体样式、替换辅助色等。下面示例中的代码均为在custom-theme.less进行新增操作。

引入 less

新建一个单独的 Less 文件如下,再引入这个文件。

@import '~rsuite/lib/styles/themes/default/index.less'; //引入默认的样式文件
@import 'custom-theme.less'; // 进行样式定制

定制主题色

设置主题基色。

@base-color: #00bcd4;

配置主题基色以后,会生成一组色板(@H050 - @H900, H 是 Hue 的缩写 )参考: constants.less。现在就去调色板选择适合的颜色或上传自己的 Logo 进行预览。

调整组件圆角半径

@border-radius-base: 2px;

修改字体样式

@font-family-base: 'Lucida Grande', 'Avenir Next', 'Helvetica Neue', Helvetica,
  Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei,
  sans-serif;
@font-size-base: 14px;

替换辅助色

信息,成功,警告,错误分别对应的颜色,修改后影响到 Message,Notification 等需要显示状态的组件。

@info-color: #2196f3;
@info-light-color: #e9f5fe;

@success-color: #4caf50;
@success-light-color: #edfae1;

@warning-color: #ffb300;
@warning-light-color: #fff9e6;

@error-color: #f44336;
@error-light-color: #fde9ef;

禁用涟漪动画

@button-ripple: false;

更多自定义配置

我们提供了各种场景的变量,如果依然不能满足您的定制需求,欢迎给我们提 issue。

Webpack 编译多主题方案

React Suite 提供了一个 Webpack 辅助工具 webpack-multiple-themes-compile, 可以在项目编译时候根据配置生成多套 CSS 文件,然后在不同的主题环境引入不同的 CSS 文件,实现多主题切换效果。实现的原理是基于 Less 的变量替换方式,所以必须要依赖于 Less 编译,我们通过以下一个示例进行说明。

  • 首先,我们看一下默认情况下通过 Webpack 把 Less 编译成 CSS 的配置如下:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLess = new ExtractTextPlugin(`style.[hash].css`);

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: extractLess.extract({
          use: [
            { loader: 'css-loader' },
            { loader: 'less-loader?javascriptEnabled=true' }
          ]
        })
      }
    ]
  }
  // ...其他配置
};
  • 然后,将 Less 文件交由 webpack-multiple-themes-compile 处理,配置 themesConfig 参数定义主题下需要的变量。
const merge = require('webpack-merge');
const multipleThemesCompile = require('webpack-multiple-themes-compile');

const webpackConfigs = {
  // There is another options.
};

module.exports = merge(
  webpackConfigs,
  multipleThemesCompile({
    themesConfig: {
      default: {},
      green: {
        'base-color': '#008000'
      },
      yellow: {
        'base-color': '#ffff00'
      }
    }
  })
);

如果您使用了 html-webpack-plugin, 为了避免把所有的样式引入到 html 中,需要额外添加 excludeChunks 参数,排除主题相关 CSS。

 new HtmlwebpackPlugin({
   ...
+  excludeChunks: ['themes']
 })
  • 最后,在运行 Webpack 命令以后,就会生成多套 CSS,根据自己的业务要求,在不同的主题环境下引入对应的 CSS,就实现了多主题切换。具体详细的实现可以参考示例项目 multiple-themes
├── theme-default.css
├── theme-green.css
└── theme-yellow.css

常见问题

如何在本地配置字体文件?

RSUITE 中使用的图标字体文件都部署在 jsDelivr CDN, 如果您希望本地部署,则需要修改图标字体的路径:

@icon-font-path: './fonts';

另外,您还需要在 webpack 中配置 url-loader 来加载图标字体文件,webpack 4 配置示例:

{
  test: /\.(woff|woff2|eot|ttf|svg)($|\?)/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 1,
        size: 16,
        hash: 'sha512',
        digest: 'hex',
        name: '[hash].[ext]',
        publicPath: '/'
      }
    }
  ]
}

如何全局修改组件的 className 前缀,rs- ?

首先,在您的 less 文件中定义 @ns 来覆盖默认配置。

@ns: custom-;

然后, 再通过 webpack 注入常量 __RSUITE_CLASSNAME_PREFIX__ , 所有组件的 className 前缀会通过注入的常量覆盖默认的 rs-

plugins: [
  //...
  new webpack.DefinePlugin({
    __RSUITE_CLASSNAME_PREFIX__: JSON.stringify('custom-')
  })
];

如果是通过服务端渲染,在 server.js 添加如下代码 :

global.__RSUITE_CLASSNAME_PREFIX__ = 'custom-';

如果您使用了 create-react-app 创建项目,可以通过 react-app-rewire-less 和 react-app-rewire-define-plugin 进行修改。详见在 create-react-app 中使用。