Goober是一个仅约1KB大小的CSS-in-JS库，与Aphrodite动辄十几KB的体积相比，吸引力非常明显。如果你的React项目对包体积敏感，比如在做微前端、移动端H5或者需要极致首屏速度的场景，把Aphrodite换成Goober是一个性价比很高的优化手段。不过两者的API设计思路差异不小，直接替换会报错，本文就来详细讲讲迁移的具体做法和注意事项。
一、两个库的核心差异在哪里
在动手迁移之前，先要理解两个库在架构上的本质区别。Aphrodite采用运行时生成类名的方式，调用StyleSheet.create之后，它会为每个样式对象生成一个形如randomHash-css-1的类名，渲染时需要用css()函数包裹才能生效。而Goober更接近styled-components的思路，它的css函数会直接生成一段CSS规则并注入到样式表中，同时返回对应的类名。
这个差异决定了迁移的主要工作量。Aphrodite中我们习惯了三段式写法：StyleSheet.create定义样式、css()取类名、className绑定。Goober则简化成一步，样式即类名，用完即走。下面是同一个按钮在两个库中的写法对照：
// Aphrodite 写法
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
button: {
padding: '8px 16px',
borderRadius: 4,
backgroundColor: '#1677ff',
color: '#fff'
}
});
function Button({ children }) {
return <button className={css(styles.button)}>{children}</button>;
}
// Goober 写法
import { css } from 'goober';
function Button({ children }) {
const buttonClass = css`
padding: 8px 16px;
border-radius: 4px;
background-color: #1677ff;
color: #fff;
`;
return <button className={buttonClass}>{children}</button>;
}
可以看到，Goober默认推荐使用标签模板字符串语法，直接写原生CSS。如果你更喜欢对象写法，Goober也支持css({...})的形式，这对从Aphrodite批量迁移旧代码非常友好，可以先用对象写法快速完成迁移，再逐步重构成模板字符串风格。
二、逐步迁移：从样式定义到组件绑定
1. 替换样式定义方式
第一步是把所有StyleSheet.create调用改掉。Goober没有StyleSheet这个概念，样式可以直接定义为模块级常量。如果你的Aphrodite代码里大量使用了对象写法，最省力的方案是保留对象结构，只是去掉StyleSheet.create的包裹：
import { css } from 'goober';
// 保留对象风格，改造成 Goober 支持的写法
const buttonStyle = css({
padding: '8px 16px',
borderRadius: '4px',
backgroundColor: '#1677ff',
':hover': {
backgroundColor: '#4096ff'
}
});
function Button({ children }) {
return <button className={buttonStyle}>{children}</button>;
}
注意这里的伪类写法差异。Aphrodite用':hover'作为嵌套键，Goober的对象模式同样兼容这种写法，但模板字符串模式下会写成&:hover，这一点在后面讲高级特性时会展开。
2. 处理动态样式
Aphrodite处理动态样式的常见手段是把变量传进样式对象，或者在css()里组合多个样式。Goober的css标签模板原生支持函数插值，动态样式表达起来自然得多：
import { css } from 'goober';
function Badge({ color, active }) {
const badgeClass = css`
display: inline-block;
padding: 2px 8px;
background-color: ${active ? color : '#d9d9d9'};
transform: ${active ? 'scale(1.05)' : 'none'};
transition: all 0.3s;
`;
return <span className={badgeClass}>badge</span>;
}
这种插值方式在运行时才会生成最终的CSS规则，每次color变化都会生成一个新的类名并缓存起来。Goober内部对相同插值结果做了缓存，重复渲染相同参数时不会重复注入样式，性能上不需要担心。而Aphrodite的动态样式往往要预先定义所有变体再组合，代码量更大，灵活性也更差。
3. 多样式组合的替换
Aphrodite的css()函数可以接收多个参数做样式组合，比如css(styles.base, isActive && styles.active)。迁移到Goober后，可以用数组或逻辑拼接来实现同样的效果：
import { css } from 'goober';
const base = css`
padding: 8px 16px;
border: 1px solid #d9d9d9;
`;
const active = css`
border-color: #1677ff;
color: #1677ff;
`;
function Tab({ isActive, children }) {
return <div className={[base, isActive && active].filter(Boolean).join(' ')}>{children}</div>;
}
由于Goober的css返回的就是普通字符串类名，组合起来非常自由，直接用数组加join即可。这比Aphrodite的组合方式更直观，因为不需要理解它内部的类名合并逻辑。
三、高级特性与媒体查询的写法对照
1. 媒体查询
Aphrodite中媒体查询写在样式对象内部，Goober在模板字符串中直接写原生的@media语法即可，心智负担更低：
import { css } from 'goober';
const container = css`
width: 100%;
padding: 16px;
@media (min-width: 768px) {
padding: 24px;
max-width: 1200px;
}
`;
原生的CSS语法意味着你可以直接复制设计稿里的媒体查询规则，不需要转换成嵌套对象结构，这也是Goober迁移后开发体验提升最明显的地方之一。
2. 父子选择器与ampersand语法
Aphrodite没有嵌套选择器的能力，想要实现子元素样式只能为子元素单独定义样式类再绑定。Goober支持Sass风格的&语法：
import { css } from 'goober';
const card = css`
padding: 16px;
background: #fff;
& .title {
font-size: 18px;
font-weight: 600;
}
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
`;
function Card({ title }) {
return (
<div className={card}>
<div className="title">{title}</div>
</div>
);
}
3. 全局样式与主题变量
Aphrodite提供了StyleSheet.rehydrate和全局样式注入的辅助能力，Goober则通过createGlobalStyles和setup来覆盖这两个场景。setup通常用于配置主题函数，配合useTheme钩子使用：
import { setup, createGlobalStyles, useTheme } from 'goober';
// 配置主题
setup(undefined, undefined, undefined, (theme) => theme);
const GlobalStyles = createGlobalStyles`
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: -apple-system, 'PingFang SC', sans-serif;
background: ${(props) => props.bgColor || '#f5f5f5'};
}
`;
四、服务端渲染与迁移中的常见坑
如果你的项目启用了SSR，这一节要重点看。Goober提供了extractCss函数，用于在服务端把已生成的样式抽取成字符串，插入到HTML的head里：
import { extractCss } from 'goober';
import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);
const styleTag = `<style>${extractCss()}</style>`;
const fullHtml = `
<!DOCTYPE html>
<html>
<head>${styleTag}</head>
<body><div id="root">${html}</div></body>
</html>
`;
客户端hydration时不需要额外操作，Goober检测到样式已存在会自动跳过重复注入。这一点和Aphrodite的StyleSheet.rehydrate机制不同，Aphrodite需要显式传入服务端生成的类名哈希，而Goober靠样式内容本身做幂等，省去了不少配置。
最后列几个迁移时最容易踩的坑：第一，忘了删除Aphrodite的aphrodite.css基础样式导入，两个库共存时会出现样式覆盖混乱；第二，Goober要求调用setup(React.createElement)（在使用styledAPI时），如果你的环境无法自动推断React，需要手动初始化；第三，Aphrodite会自动给样式加vendor prefix，Goober默认不加，建议在构建层配合autoprefixer处理，否则部分浏览器上圆角、渐变等属性可能显示异常。建议迁移时按组件逐个替换并验证渲染结果，不要一次性全局替换，出问题时更容易定位。
整体来看，这次迁移的核心工作量集中在样式定义方式的重写上，动态样式和嵌套选择器部分反而是受益项，代码会更简洁。迁移完成后，包体积通常能减少12KB以上，对于有大量页面级组件的项目，收益相当可观。