Glaze 项目使用教程

Glaze 项目使用教程

glaze CSS-in-JS microlibrary for making design systems approachable with React 项目地址: https://gitcode.com/gh_mirrors/gla/glaze

1. 项目介绍

Glaze 是一个用于使设计系统更易于使用的 CSS-in-JS 微型库，特别适用于 React 项目。它结合了 Tailwind CSS 的实用优先 CSS 方法、Theme UI 的约束布局以及 Emotion 的动态样式特性。Glaze 旨在提供一个静态且可定制的前端设计系统，同时保持接近零的运行时开销。

2. 项目快速启动

安装

首先，安装 Glaze 及其依赖项：

npm install glaze treat

定义主题

创建一个主题文件 theme.treat.js，并定义你的自定义主题：

// theme.treat.js
import { createTheme, defaultTokens } from 'glaze';

export default createTheme({
  ...defaultTokens,
  // 自定义颜色
  scales: {
    color: {
      red: '#f8485e',
    },
  },
});

应用主题

在你的应用入口文件中，使用 ThemeProvider 应用主题：

// App.js
import React from 'react';
import { ThemeProvider } from 'glaze';
import theme from './theme.treat';

export default function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

使用 sx 函数进行样式定义

在你的组件中使用 sx 函数来定义样式：

import React from 'react';
import { useStyling } from 'glaze';

export default function Component() {
  const sx = useStyling();
  return (
    <p className={sx({ px: 4, color: 'white', bg: 'red' })}>
      Hello, world!
    </p>
  );
}

3. 应用案例和最佳实践

案例1：响应式布局

Glaze 支持响应式设计，可以通过定义不同的断点来实现：

const sx = useStyling();

return (
  <div className={sx({
    px: 4,
    color: 'white',
    bg: 'red',
    '@media (min-width: 600px)': {
      bg: 'blue',
    },
  })}>
    Responsive Design
  </div>
);

案例2：全局样式

使用 globalStyle 创建全局样式：

// globalStyles.treat.js
import { globalStyle } from 'treat';

globalStyle('body', {
  fontFamily: 'Arial, sans-serif',
  backgroundColor: '#f0f0f0',
});

然后在应用入口文件中引入：

import './globalStyles.treat';

4. 典型生态项目

Treat

Glaze 依赖于 Treat，这是一个用于静态样式提取的库。Treat 允许你在构建时提取样式，从而减少运行时开销。

Emotion

虽然 Glaze 本身不直接依赖 Emotion，但 Emotion 的动态样式特性被 Glaze 所借鉴，使得 Glaze 能够在需要时动态注入样式。

Tailwind CSS

Glaze 的设计灵感来自于 Tailwind CSS，特别是其实用优先的 CSS 方法。Glaze 通过提供类似的 API 来简化设计系统的创建。

通过以上步骤，你可以快速上手并使用 Glaze 来构建现代化的 React 应用。

glaze CSS-in-JS microlibrary for making design systems approachable with React 项目地址: https://gitcode.com/gh_mirrors/gla/glaze