基于 Less 的定制 🎨

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

引入 less

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

@import '~rsuite/styles/index.less';
@import 'custom-theme.less'; // 进行样式定制

定制主题色

设置主题基色。

@primary-color: #00bcd4;

配置主题基色以后，会生成一组色板（@H050 - @H900， H 是 Hue 的缩写 ）参考: [light.less][light.less]。

深色模式

如果你想同时自定义内建深色模式的颜色，你可以使用 @primary-color-dark 变量。

调整组件圆角半径 

@border-radius: 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 等需要显示状态的组件的外观。

Color State
@green success
@blue info
@yellow warning
@red error 
@green:  #4caf50;
@blue:   #2196f3;
@yellow: #ffb300;
@red:    #f44336;

深色模式

如果你想同时自定义内建深色模式的颜色，你可以使用对应的 @green-dark, @blue-dark, @yellow-dark, @red-dark 变量。

禁用涟漪动画

React Suite 在 <Button> 等一些可点击的组件上添加了涟漪动画效果。如果您不想要这些效果，可以关闭如下标识。

@enable-ripple-effect: false;

禁用 IE polyfill

React Suite 默认包含了一些用于兼容 IE 11 的样式。如果您不需要这些兼容，可以关闭如下标识。

@enable-ie-polyfill: false;

禁用 reset 相关样式引用 

@enable-css-reset: 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: {
        'primary-color': '#008000'
      },
      yellow: {
        'primary-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

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

Vercel banner