syncfusion-react-themes

Name: syncfusion-react-themes
Author: syncfusion

github.com/syncfusion设计与 UI3737 次安装6 天前更新

代码仓库

关于 syncfusion-react-themes

面向 React 开发者的 Syncfusion 组件主题应用与定制指南，涵盖内置主题、深色模式、CSS 变量、图标和尺寸设置。还介绍自定义主题及精简 CSS 的使用方式。

主要功能

01应用内置主题
02设置全局或组件级深色模式
03通过 CSS 变量定制颜色
04使用并调整主题图标
05切换常规和触控尺寸
06使用 Theme Studio 创建主题

适用场景

01为 Syncfusion React 组件应用主题
02添加运行时深色模式切换
03通过 CSS 变量调整主题颜色
04使用精简样式减少 CSS 体积

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-themes

安装后在 Claude Code 中输入/syncfusion-react-themes确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

advanced-theming.md

built-in-themes.md

css-variables.md

dark-mode.md

icons.md

migration-styles.md

详细介绍

Syncfusion React 组件中的主题

Syncfusion React 组件提供全面的主题支持，包含现代且可自定义的主题。本指南将介绍如何应用主题、自定义外观、实现深色模式、使用 CSS 变量、管理图标，以及创建自定义主题，从而打造风格一致、专业的 React 应用。

文档与导航指南

内置主题

📄 阅读： references/built-in-themes.md

提供 10 多种主题
通过 npm 包、CDN 或单个组件样式应用主题
经过优化的精简版 CSS 文件，可缩减包体积

将样式从组件包迁移到主题包

📄 阅读： references/migration-styles.md

从组件包迁移到主题包
将 SCSS 和 CSS 引用迁移到主题包
通过索引文件自动包含依赖项

实现深色模式

📄 阅读： references/dark-mode.md

使用 e-dark-mode 类启用全局深色模式
为单个组件启用深色模式
使用复选框或切换按钮在运行时切换主题

自定义 CSS 变量

📄 阅读： references/css-variables.md

各主题的 CSS 变量结构（Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4）
自定义主色、成功、警告、危险和信息颜色
使用 JavaScript 在运行时修改颜色
各主题特定的变量格式（RGB 值或十六进制值）

图标库

📄 阅读： references/icons.md

设置图标库（npm 或 CDN）
使用带有 e-icons 类的图标
图标尺寸（小、中、大）
自定义图标颜色和外观
各主题可用的图标集

尺寸模式

📄 阅读： references/advanced-theming.md

普通与触控（较大）尺寸模式
全局或按组件启用尺寸模式
在运行时切换尺寸模式

高级功能

📄 阅读： references/advanced-theming.md

集成 styled-components
自定义所有组件的字体
使用 Theme Studio 创建自定义主题

快速入门

安装并应用主题

步骤 1：安装 Syncfusion React 包和主题包

npm install @syncfusion/ej2-react-buttons@latest @syncfusion/ej2-tailwind3-theme@latest --save

步骤 2：导入主题 CSS

选项 1：从 npm 主题包导入（推荐）

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";

选项 2：使用 CDN

⚠️ 重要： CDN 版本必须与已安装的 npm 包版本一致，以避免样式和渲染问题。

查看已安装版本：

npm list @syncfusion/ej2-react-buttons

然后使用匹配的 CDN 版本：



<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>


<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>

注意： 推荐使用 npm 导入（选项 1），因为它会自动保持 CSS 和 JavaScript 版本同步。

常见模式

模式 1：全局应用深色模式

import React, { useState } from 'react';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleDarkModeToggle = (event) => {
    const checked = event.checked ?? false;
    setIsDarkMode(checked);
    
    if (checked) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  };

  return (
    <div>
      <CheckBoxComponent 
        label="Enable Dark Mode" 
        checked={isDarkMode} 
        change={handleDarkModeToggle}
      />
      <ButtonComponent cssClass="e-primary">Sample Button</ButtonComponent>
    </div>
  );
}

export default App;

模式 2：使用 CSS 变量自定义主色

对于 Fluent 2 主题：

/* src/App.css */
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}

对于 Material 3 主题（使用 RGB 值）：

/* src/App.css */
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}

模式 3：全局启用触控模式


<body class="e-bigger">
  <div id="root"></div>
</body>

也可以按组件启用：

<ButtonComponent cssClass="e-bigger">Touch-Friendly Button</ButtonComponent>

模式 4：使用优化的 CSS 加快加载速度

/* src/App.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";

模式 5：使用 Syncfusion 库中的图标

安装图标包：

可以安装图标包或主题包：

npm install @syncfusion/ej2-icons@latest

/* or */

npm install @syncfusion/ej2-tailwind3-theme@latest

导入图标样式：

/* src/App.css */
/* Syncfusion theme package icon styles */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";

/* or */

/* Syncfusion components package icon styles */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";

在组件中使用图标：

<span className="e-icons e-cut"></span>
<span className="e-icons e-medium e-copy"></span>
<span className="e-icons e-large e-paste"></span>

支持 Markdown

登录后评论