SolidJS 应优先用 Tailwind + classList 或 Styletron；禁用 styled-components/Emotion，因其依赖 React reconciler 和 hooks，与 Solid 编译时响应式不兼容，会导致样式不响应、SSR 错乱和类型错误。
SolidJS 本身不内置样式方案，也没有官方推荐的 CSS-in-JS 库，所以集成方式完全取决于你对「动态性」「构建时控制」和「运行时开销」的权衡。直接结论：不要强行套用 React 生态的 styled-components 模式；优先用 Solid 原生支持的 classList + 原子化类名（如 Tailwind），或轻量级、无虚拟 DOM 依赖的 CSS-in-JS 工具（如 Styletron）。
为什么不能直接用 styled-components 或 Emotion
这些库重度依赖 React 的 reconciler 和 hooks 生命周期（比如 useInsertionEffect、useLayoutEffect），而 Solid 的响应式系统是编译时追踪 + 细粒度更新，没有等价 hook 语义。强行接入会出现：
-
styled.button返回的组件无法响应 Solid 的 props 变化（比如disabled切换不触发样式重计算） - 服务端渲染（SSR）时样式注入时机错乱，导致 FOUC 或重复插入
<style> - 类型推导断裂：Solid 的 JSX 元素类型与 styled-components 的泛型不兼容，
styled.div<{size: 'sm' | 'lg'}>会报错或失去 props 提示
推荐方案：Tailwind + classList 驱动原子化
Tailwind 是目前与 SolidJS 匹配度最高的样式方案——零运行时、构建期提取、类名即 API。关键不是“写 class”，而是怎么让 class 的组合逻辑清晰可维护：
- 用
classList替代字符串拼接：classList={{ 'bg-blue-500': isActive, 'text-white': isPrimary, 'p-4': size === 'lg' }}，避免className={isActive ? 'bg-blue-500' : 'bg-gray-200'}这种易漏、难查的写法 - 动态类名必须显式声明在
content配置中：例如className={status === 'success' ? 'text-green-500' : 'text-red-500'}，需在tailwind.config.js的content数组里包含该文件路径，否则构建后样式丢失 - 超过 3 处重复的原子组合（如
flex items-center gap-2 p-3 rounded-lg），应封装为自定义组件或用@layer components抽成语义类，而不是堆 class
如果真需要 CSS-in-JS：用 Styletron 而非 Emotion
Styletron 的 styletron-engine-atomic 不依赖虚拟 DOM，只靠 insertRule 和哈希缓存，天然适配 Solid 的细粒度更新机制：
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install styletron-solid styletron-engine-atomic（注意不是styletron-react） - 初始化引擎时传入 Solid 的
render上下文（比如在hydrateRoot后调用engine.hydrate()），否则 SSR 样式不匹配 - 避免在组件内部反复调用
css({})：每个对象都会生成新规则，应提前定义好样式 token，例如const buttonBase = css({ padding: '0.5rem 1rem', borderRadius: '4px' }) - 主题切换需手动触发
engine.update({})并通知 Solid 重新计算，不能依赖ThemeProvider的 context 自动广播
最常被忽略的一点：Solid 的响应式更新不触发 CSS 规则重注册，所以任何依赖 props 的样式计算（比如 color: props.theme.primary）必须包裹在 createMemo 里，否则首次渲染后就冻结了。
