Vanilla-Extract 项目使用教程

Vanilla-Extract 项目使用教程

vanilla-extractZero-runtime Stylesheets-in-TypeScript项目地址:https://gitcode.com/gh_mirrors/va/vanilla-extract

项目介绍

Vanilla-Extract 是一个零运行时的样式表解决方案，它允许你在 TypeScript 中编写 CSS。这个项目旨在通过利用 TypeScript 和 CSS 的全部功能，提供类型安全主题、变量和轻松组织样式的方式。Vanilla-Extract 特别适合那些希望在项目中扩展样式表功能的开发者。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 Vanilla-Extract：

npm install @vanilla-extract/css

或者使用 yarn：

yarn add @vanilla-extract/css

基本使用

以下是一个简单的示例，展示如何在项目中使用 Vanilla-Extract：

// styles.css.ts
import { style } from '@vanilla-extract/css';

export const container = style({
  backgroundColor: 'blue',
  color: 'white',
  padding: 10,
  margin: '10px 0',
});

// App.tsx
import React from 'react';
import { container } from './styles.css';

const App = () => (
  <div className={container}>
    Hello, Vanilla-Extract!
  </div>
);

export default App;

应用案例和最佳实践

应用案例

Vanilla-Extract 可以用于各种规模的 React 项目，从小型个人项目到大型企业级应用。以下是一个使用 Vanilla-Extract 进行主题切换的示例：

// theme.css.ts
import { createTheme } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    background: 'white',
    text: 'black',
  },
});

export const darkThemeClass = createTheme(vars, {
  color: {
    background: 'black',
    text: 'white',
  },
});

// App.tsx
import React, { useState } from 'react';
import { themeClass, darkThemeClass } from './theme.css';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <div className={isDark ? darkThemeClass : themeClass}>
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
      <p>Hello, Vanilla-Extract!</p>
    </div>
  );
};

export default App;

最佳实践

• 模块化样式：将样式文件与组件文件放在一起，便于管理和维护。
• 主题管理：使用 createTheme 创建和管理主题，确保样式的一致性和可维护性。
• 类型安全：充分利用 TypeScript 的类型检查，减少样式错误。

典型生态项目

Vanilla-Extract 可以与许多流行的前端框架和工具集成，例如：

• React：Vanilla-Extract 与 React 配合得非常好，可以直接在 React 组件中使用。
• Next.js：在 Next.js 项目中，Vanilla-Extract 可以无缝集成，提供零运行时的样式解决方案。
• Storybook：使用 Storybook 进行组件开发时，Vanilla-Extract 可以提供一致的样式管理。

通过这些集成，Vanilla-Extract 可以帮助开发者构建更加模块化、可维护的前端项目。

vanilla-extractZero-runtime Stylesheets-in-TypeScript项目地址:https://gitcode.com/gh_mirrors/va/vanilla-extract