stylex-styling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

StyleX Styling

StyleX 样式方案

Overview

概述

This project uses StyleX for styling with design tokens, responsive breakpoints, and theme-aware colors.

本项目使用StyleX进行样式开发，结合了设计令牌、响应式断点和主题自适应颜色。

Key Patterns

核心模式

Design Tokens

设计令牌

Import tokens from:
```
@/tokens.stylex.ts
```
Available token categories:
- ```
color
```
  - Theme-aware colors (textMain, backgroundRaised, controlActive, etc.)
- ```
controlSize
```
  - Spacing and sizing values (_1 through _9)
- ```
font
```
  - Typography values (weight_5, etc.)

令牌导入路径:
```
@/tokens.stylex.ts
```
可用令牌类别:
- ```
color
```
  - 主题自适应颜色（textMain、backgroundRaised、controlActive等）
- ```
controlSize
```
  - 间距与尺寸值（_1至_9）
- ```
font
```
  - 排版值（weight_5等）

Breakpoints

断点

Import from:
```
@/breakpoints
```
Defined via: Babel plugin in
```
.babelrc.js
```
with typing in
```
src/babel.d.ts
```

Usage:

{ default: value, [breakpoints.md]: largeScreenValue }

导入路径:
```
@/breakpoints
```
定义方式: 通过
```
.babelrc.js
```
中的Babel插件实现，类型定义在
```
src/babel.d.ts
```
中

使用方式:

{ default: value, [breakpoints.md]: largeScreenValue }

Custom CSS Prop

自定义CSS属性

Use

css={styles.someStyle}

prop instead of

{...stylex.props(styles.someStyle)}

Transpiled by custom Babel plugin

Supports arrays:

css={[styles.base, isActive && styles.active]}

使用

css={styles.someStyle}

属性替代

{...stylex.props(styles.someStyle)}

由自定义Babel插件转译

支持数组语法:

css={[styles.base, isActive && styles.active]}

Complete Example

完整示例

tsx

import * as stylex from "@stylexjs/stylex";
import { breakpoints } from "@/breakpoints";
import { color, controlSize, font } from "@/tokens.stylex";

function Button({ children, isActive, hideLabelOnMobile, ...props }) {
  return (
    <button
      {...props}
      css={[
        styles.button,
        isActive && styles.active,
        hideLabelOnMobile && styles.hideLabelOnMobile,
      ]}
    >
      {children}
    </button>
  );
}

const styles = stylex.create({
  button: {
    // Use design tokens
    fontSize: controlSize._4,
    fontWeight: font.weight_5,
    minHeight: controlSize._9,
    paddingBlock: controlSize._1,
    paddingInline: controlSize._3,

    // Responsive design with breakpoints
    display: { default: "none", [breakpoints.md]: "inline-flex" },

    // Theme-aware colors
    color: color.textMain,
    backgroundColor: {
      default: color.backgroundRaised,
      ":hover": color.backgroundHover,
    },
  },
  active: {
    backgroundColor: color.controlActive,
    color: color.textOnActive,
  },
  hideLabelOnMobile: {
    paddingLeft: {
      default: controlSize._3,
      [breakpoints.md]: controlSize._2,
    },
  },
});

tsx

import * as stylex from "@stylexjs/stylex";
import { breakpoints } from "@/breakpoints";
import { color, controlSize, font } from "@/tokens.stylex";

function Button({ children, isActive, hideLabelOnMobile, ...props }) {
  return (
    <button
      {...props}
      css={[
        styles.button,
        isActive && styles.active,
        hideLabelOnMobile && styles.hideLabelOnMobile,
      ]}
    >
      {children}
    </button>
  );
}

const styles = stylex.create({
  button: {
    // Use design tokens
    fontSize: controlSize._4,
    fontWeight: font.weight_5,
    minHeight: controlSize._9,
    paddingBlock: controlSize._1,
    paddingInline: controlSize._3,

    // Responsive design with breakpoints
    display: { default: "none", [breakpoints.md]: "inline-flex" },

    // Theme-aware colors
    color: color.textMain,
    backgroundColor: {
      default: color.backgroundRaised,
      ":hover": color.backgroundHover,
    },
  },
  active: {
    backgroundColor: color.controlActive,
    color: color.textOnActive,
  },
  hideLabelOnMobile: {
    paddingLeft: {
      default: controlSize._3,
      [breakpoints.md]: controlSize._2,
    },
  },
});

Best Practices

最佳实践

Always use design tokens - Never hardcode colors, spacing, or font values
Use the css prop - Don't use
```
{...stylex.props()}
```
directly
Conditional styles with arrays -
```
css={[base, condition && conditional]}
```
Responsive by default - Consider mobile-first with breakpoint overrides
Theme-aware colors - Use color tokens that adapt to light/dark themes

Pseudo-selectors in objects -

{ default: value, ":hover": hoverValue }

始终使用设计令牌 - 切勿硬编码颜色、间距或字体值
使用css属性 - 不要直接使用
```
{...stylex.props()}
```
数组语法实现条件样式 -
```
css={[base, condition && conditional]}
```
默认支持响应式 - 采用移动端优先思路，通过断点覆盖样式
主题自适应颜色 - 使用可适配亮色/暗色主题的颜色令牌

对象中定义伪选择器 -

{ default: value, ":hover": hoverValue }

Common Patterns

常见模式

Responsive Display

响应式显示

tsx

display: { default: "none", [breakpoints.md]: "flex" }

tsx

display: { default: "none", [breakpoints.md]: "flex" }

Conditional Styles

条件样式

tsx

css={[styles.base, isActive && styles.active, hasError && styles.error]}

tsx

css={[styles.base, isActive && styles.active, hasError && styles.error]}

Hover States

悬停状态

tsx

backgroundColor: {
  default: color.backgroundRaised,
  ":hover": color.backgroundHover,
}

tsx

backgroundColor: {
  default: color.backgroundRaised,
  ":hover": color.backgroundHover,
}

Mobile-First Padding

移动端优先的内边距

tsx

padding: {
  default: controlSize._2,
  [breakpoints.md]: controlSize._4,
  [breakpoints.lg]: controlSize._6,
}

tsx

padding: {
  default: controlSize._2,
  [breakpoints.md]: controlSize._4,
  [breakpoints.lg]: controlSize._6,
}