个性化定制 🎨

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;

第二色板

第二色板用作辅助颜色,分别代表不同的状态——信息、成功、警告、错误。你可以自定义第二色板来修改 MessageNotification 等需要显示状态的组件的外观。

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-lessreact-app-rewire-define-plugin 进行修改。详见在 create-react-app 中使用

Vercel banner