跳到主要內容

安裝

環境要求​

  • React ^18.0.0 或 ^19.0.0
  • TypeScript >= 5.0（可選，但推薦）

@lh-ui/react 的唯一執行時依賴是 @lh-ui/share —— 家族的框架無關共享層（元件邏輯、樣式、主題、文案）。peer 依賴只有 react 與 react-dom。

套件管理器安裝​

pnpm add @lh-ui/react
npm install @lh-ui/react
yarn add @lh-ui/react
bun add @lh-ui/react

引入樣式​

@lh-ui/react 採用按需引入策略（與 @lh-ui/vue2 對齊）：包入口不注入任何樣式，主題變數與元件樣式分別引入。

// 主題變數（必需）：包含設計令牌與暗色變數
import '@lh-ui/react/theme.css'

// 元件樣式（按需）：每用到一个元件就引一條
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

主題 CSS 與元件 CSS 的類別名完全一致，因此你也可以直接從 @lh-ui/share 引入同一份 SCSS 原始碼自行編譯：

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';
為什麼不全量注入

React 生態的按需引入是主流，且全量樣式 side-effect 會破壞 tree-shaking。把樣式入口交給使用者，打包器能精確裁剪未用到的元件樣式。

暗色模式​

暗色變數在 theme-dark.css，與 theme.css 互斥（二選一），或在執行時透過 useLhTheme / useLhPresetTheme 切換：

import { useLhTheme } from '@lh-ui/react'

function App() {
  const { theme, toggleTheme } = useLhTheme()
  return <button onClick={toggleTheme}>{theme === 'dark' ? '切换到日间' : '切换到夜间'}</button>
}

瀏覽器支援​

現代瀏覽器（Chrome / Edge / Firefox / Safari 最近兩個穩定版）。元件大量使用 CSS 自訂屬性（var(--lh-*)），不支援 IE。