样式

使用 className 工具类或带类型的 props 设置组件样式。Text.js 应用没有样式表。

#工具类

className 接受 Tailwind 风格的工具类。一个单位对应一个单元格。

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#带类型的 props

每个工具类都有对应的 prop。props 的优先级高于 className。

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#颜色

使用十六进制颜色值、Tailwind 颜色名称或主题 Token，例如 fg、muted、surface、accent、success 和 danger。Token 随当前主题变化。

#主题

内置 5 个预设：geistDark、geistLight、opencodeDark、tokyoNight 和 amberCrt。

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#响应式视口

应用默认填满停靠的 DevTools 控制台（viewport.responsive），并随面板拖动调整大小。使用 flex 布局，并在需要时读取尺寸：

const { cols } = useViewport();const sidebar = cols >= 90;

页面只能感知停靠的面板。页面无法感知独立窗口中的 DevTools、DevTools 缩放和控制台侧边栏，因此应用使用 viewport.width × viewport.height（默认 120×36）或你固定的尺寸：

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again