@x-edu/all-theme

@x-edu/all-theme

UI 规范说明

安装

npm install @x-edu/all-theme

使用

• 在 LESS 样式文件中引入样式：

@import '@x-edu/all-theme/dist/default/index.less';

• 在项目文件中引入样式：

import '@x-edu/all-theme/dist/default/index.less'

• 引入 JSON 格式的样式变量：

import themeVariable from '@x-edu/all-theme/dist/default/index.js';

目前只有一个主题：default。

注意：对于非 Fish 4 实现的部分，在引入 LESS 文件后，请根据 UI 规范使用变量覆盖样式。

下面开始处理 Fish 4 的组件样式：

使用 modifyVars 覆盖 Fish 变量

• Toolkit 项目，在 gem-mine.config.js 中设置 css.loaderOptions：

// 引入 JSON 格式的样式变量
const themeVars = require('@x-edu/all-theme/dist/default/index.js')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: themeVars,
          javascriptEnabled: true
        }
      }
    }
  }
}

• Webpack 项目，在 webpack.config.js 中通过 less-loader 配置：

// 引入 JSON 格式的样式变量
const themeVars = require('@x-edu/all-theme/dist/default/index.js')

module.exports = {
  rules: [{
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'less-loader',
        options: {
          lessOptions: { 
            modifyVars: themeVars,
            javascriptEnabled: true
          }
        }
      }
    ]
  }]
}

Fish 样式覆盖

存在覆盖 Fish 变量后，依然无法达到 UI 预期效果的情况，需要引入主题样式对 Fish 组件进行额外的样式覆写。

使用 applyTheme 设置主题

@x-edu/all-theme 提供了两个 API：

• applyTheme(themeName, selector = 'body')：重写指定元素下的 Fish 组件样式
• removeTheme(themeName, selector = 'body')：移除指定元素下的重写样式

• themeName (string): 主题名称，'default'（默认主题）。
• selector (string, 可选): CSS 选择器字符串，默认为 'body'。

使用示例

import { applyTheme, removeTheme } from '@x-edu/all-theme';

// 默认 'body'
// 应用主题 
applyTheme('default');
// 如果需要移除主题
// removeTheme('default');

// id="root"
// applyTheme('default', '#root');
// removeTheme('default', '#root');

在项目文件或 LESS 样式文件中引入主题样式

保证在期望生效页面正确引入即可。如果希望全局生效，请在项目入口文件或全局生效的 LESS 文件中引入。

• 在 LESS 样式文件中引入样式：

@import '@x-edu/all-theme/dist/default/index.less';

• 在项目文件中引入样式：

import '@x-edu/all-theme/dist/default/index.less'

覆盖效果

引入 @x-edu/all-theme 对 Fish4 的样式覆盖效果

FAQ

Fish 4 组件样式未生效或部分生效。

• 是否正确使用了 applyTheme 设置主题，如果设置成功，对应的元素会有类名 'x-edu-all-theme-default'。
• 当前页面是否正确引入了主题样式。
• 对照 样式覆盖效果文档 确认组件的使用方式是否一致。
• 如果用法一致，仍存在样式和截图不一致的情况，请排查项目中是否存在其他覆写样式。

可能存在某些场景未提供支持的情况，可以通过提供的 反馈表 提交问题，以便后续更新和完善。