Surface 表面
提供表面级样式与子组件上下文的容器组件。
用法
import { Surface } from '@lenso/ui';此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function Basic() { return ( <Surface xstyle={s.surface} variant="default"> <h3 {...stylex.props(s.textBase, s.semibold, s.foreground)}>Surface Content</h3> <p {...stylex.props(s.textSm, s.muted)}> This is a default surface variant. It uses bg-surface styling. </p> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
示例
变体
Surface 提供描述 prominence 层级的语义变体：
default- 标准表面外观（bg-surface）secondary- 中等 prominence（bg-surface-secondary）tertiary- 较高 prominence（bg-surface-tertiary）
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
const variants = [ { variant: "default", label: "Default", description: "This is a default surface variant. It uses bg-surface styling.", }, { variant: "secondary", label: "Secondary", description: "This is a secondary surface variant. It uses bg-surface-secondary styling.", }, { variant: "tertiary", label: "Tertiary", description: "This is a tertiary surface variant. It uses bg-surface-tertiary styling.", }, { variant: "transparent", label: "Transparent", description: "This is a transparent surface variant. It has no background, suitable for overlays and cards with custom backgrounds.", },] as const;export function Variants() { return ( <div {...stylex.props(s.column4)}> {variants.map(({ variant, label, description }) => ( <div key={variant} {...stylex.props(s.column2)}> <p {...stylex.props(s.textSm, s.medium, s.muted)}>{label}</p> <Surface xstyle={[s.surface, variant === "transparent" && s.border]} variant={variant}> <h3 {...stylex.props(s.textBase, s.semibold, s.foreground)}>Surface Content</h3> <p {...stylex.props(s.textSm, s.muted)}>{description}</p> </Surface> </div> ))} </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
搭配表单
在 Surface 内使用表单组件时，请使用 variant="secondary" 以应用适合表面背景的低强调变体。
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input, Surface, TextArea } from "@lenso/ui";import { s } from "../card/display.stylex";
export function WithFormComponents() { return ( <Surface xstyle={s.surfaceForm} variant="default"> <Input aria-label="Input with secondary variant" placeholder="Input with secondary variant" variant="secondary" /> <TextArea aria-label="TextArea with secondary variant" placeholder="TextArea with secondary variant" variant="secondary" /> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
自定义样式
Tailwind CSS
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function CustomStyles() { return ( <Surface xstyle={s.surfaceCustom} variant="default"> <h3 {...stylex.props(s.textSm, s.semibold, s.foreground)}>Billing overview</h3> <p {...stylex.props(s.textSm, s.muted)}>View invoices and payment methods in one place.</p> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
全局 CSS
若要自定义组件类，可使用 @layer components 指令。了解更多。
@layer components { .surface { @apply rounded-2xl border border-border; }
.surface--secondary { @apply bg-gradient-to-br from-blue-50 to-purple-50; }}样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
Surface 组件使用以下 CSS 类（查看源码样式）：
基础类 [!toc]
.surface- Surface 根容器
变体类 [!toc]
.surface--default- 默认 Surface 变体（bg-surface）.surface--secondary- Secondary Surface 变体（bg-surface-secondary）.surface--tertiary- Tertiary Surface 变体（bg-surface-tertiary）
API 参考
Surface
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
variant | "transparent" | "default" | "secondary" | "tertiary" | "default" | Surface 的视觉变体。 |
className | string | - | 额外的 CSS 类。 |
children | ReactNode | - | Surface 内容。 |
Context API
SurfaceContext
子组件可通过 Surface 上下文读取当前变体：
import { useContext } from 'react';import { SurfaceContext } from '@lenso/ui';
function MyComponent() { const { variant } = useContext(SurfaceContext); // variant 为 "transparent" | "default" | "secondary" | "tertiary" | undefined}