样式与布局

把所有布局、排版和颜色声明都放在 style 里，使用 camelCase 键。长度是逻辑像素。

#样式方法

<View style={{ padding: 16, gap: 12, bg: "#18181b", color: "#fafafa" }} />

布尔预设覆盖与 Go 相同的辅助方法：

<View style={{ flexCol: true, p3: true, gap2: true, roundedLg: true }}>
  <Text style={{ textLg: true, fontSemibold: true }}>Panel title</Text>
</View>

roundedLg 是 8 像素圆角；p3 是 12 像素。自定义值使用 borderRadius、padding、gridTemplateColumns 和 width。假值预设（false、null 或 undefined）会关闭该预设。

#合并样式

样式数组从左到右合并。后面的字段会覆盖前面的。假值条目会被忽略。

<View style={[base, selected() && selectedStyle, { padding: 20 }]} />

从响应式样式对象中移除某个字段会清除该属性。

#复用样式

import type { JSX } from "@quickgui/solid";

const panel = { p3: true, roundedXl: true, bg: "#20242c" } satisfies JSX.Style;
<View style={panel}><Text>Reusable panel</Text></View>

需要保持更新时，把 getter 留在 JSX 中。

#Flexbox

使用 display、flexDirection、flexGrow、flexShrink、flexBasis、对齐和 gap。给可伸缩的滚动子节点设置 minWidth: 0 或 minHeight: 0，它们才能收缩。

#网格布局

使用 display: "grid"，配合轨道、放置和跨度字段。

#文本与颜色

字族、字重、字号、换行和选择会作用于文本。颜色接受 hex、CSS 颜色字符串或打包的 RGBA 值。

#交互状态

<Button style={{
  bg: "#2563eb",
  hover: { bg: "#1d4ed8" },
  active: { opacity: 0.8 },
  focusVisible: { outlineColor: "#93c5fd", outlineWidth: 2 },
}}>Save</Button>

#分组与具名分组悬停

在祖先上命名 group，并在后代上使用 groupHover 或 groupActive，让它们一起变化样式。