Semi Design 快速入门指南：React 组件库的安装与使用

最新推荐文章于 2025-06-23 13:20:11 发布

纪栋岑Philomena

最新推荐文章于 2025-06-23 13:20:11 发布

阅读量260

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00414/article/details/148419238

Semi Design 快速入门指南：React 组件库的安装与使用

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

Semi Design 是由抖音前端团队精心打造的一款企业级 React UI 组件库，提供了 70+ 高质量的开箱即用组件，能够显著提升前端开发效率。本文将详细介绍如何在不同场景下安装和使用 Semi Design。

一、Semi Design 简介

Semi Design 是一个现代化的 React UI 组件库，具有以下特点：

提供丰富的 React 组件（按钮、表单、导航、数据展示等）
支持 React v16、v17、v18 版本
内置国际化支持
提供主题定制能力
支持按需加载
配套提供图标库和插画库

二、基础安装

1. 使用包管理器安装

根据项目使用的包管理器，选择以下命令之一进行安装：

# 使用 npm
npm i @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

# 使用 pnpm
pnpm add @douyinfe/semi-ui

2. 基本使用示例

安装完成后，可以直接在 React 组件中引入使用：

import React from 'react';
import { Button, Toast } from '@douyinfe/semi-ui';

const App = () => {
    return (
        <Button onClick={() => Toast.warning({ content: '欢迎使用 Semi Design' })}>
            点击测试
        </Button>
    );
};

export default App;

3. 样式重置建议

为了确保组件在不同浏览器中表现一致，建议在项目中引入 reset.css：

npm install reset-css

然后在项目入口文件中引入：

import 'reset-css';

三、在 Next.js 中使用

1. 基本配置（Next.js ≥ v13.1）

对于使用默认主题的项目，只需在 next.config.js 中配置 transpilePackages：

// next.config.js
const nextConfig = {
  transpilePackages: [
    '@douyinfe/semi-ui', 
    '@douyinfe/semi-icons', 
    '@douyinfe/semi-illustrations'
  ],
};

module.exports = nextConfig;

2. 使用定制主题

如需使用定制主题，需要安装 @douyinfe/semi-next 插件：

npm i @douyinfe/semi-next

配置 next.config.js：

const semi = require('@douyinfe/semi-next').default();
module.exports = semi({
  // 自定义 Next.js 配置
});

在全局样式中引入主题 CSS：

/* styles/globals.css */
@import '~@douyinfe/semi-ui/dist/css/semi.min.css';

3. 使用特定主题包

如需使用特定主题（如抖音创作服务平台主题），修改引入路径：

/* styles/globals.css */
@import '~@semi-bot/semi-theme-doucreator/semi.min.css';

四、在 Remix 中使用

1. 基本配置（Remix v1）

确保 @remix 相关包版本 > 1.11.0，并安装 @remix-run/css-bundle：

npm install @remix-run/css-bundle

配置 remix.config.js：

module.exports = {
  future: {
    unstable_cssSideEffectImports: true,
  },
  serverDependenciesToBundle: [
    /^@douyinfe\/semi-ui/,
    /^@douyinfe\/semi-icons/,
    /^@douyinfe\/semi-illustrations/,
  ],
};

在 root.tsx 中配置 CSS 打包：

import { cssBundleHref } from "@remix-run/css-bundle";

export const links = () => {
  return [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
  ];
};

2. 使用定制主题

替换 cssBundleHref 为特定主题 CSS：

import ThemeStyle from "@semi-bot/semi-theme-doucreator/semi.min.css";

export const links = () => {
  return [
    { rel: "stylesheet", href: ThemeStyle },
  ];
};

五、UMD 方式使用（不推荐）

虽然不推荐，但在特殊场景下可以通过 UMD 方式直接引入：

<!DOCTYPE html>
<html>
<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  
  <script src="https://unpkg.com/@douyinfe/semi-ui@latest/dist/umd/semi-ui.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@latest/dist/css/semi.min.css">
  
  <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.min.css">
  
  <script src="https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { Button, Toast } = SemiUI;
    ReactDOM.render(
      <Button onClick={() => Toast.warning('Hello Semi')}>测试</Button>,
      document.getElementById('root')
    );
  </script>
</body>
</html>