CSS Academy · 课时

Emotion：css() 与 styled()

Q: 「Emotion：css() 与 styled()」这节课中我会学到什么？

使用 Emotion 的 css() 辅助函数和 styled() 组件工厂应用动态样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Emotion 的 css() 辅助函数和 styled() 组件工厂应用动态样式。

Emotion：css() 与 styled() 是 CoddyKit 上的免费 CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 Emotion？

Emotion 是一个 API 灵活的 CSS-in-JS 库。它提供两种主要方式：css() 函数（与框架无关）和 styled() 接口（类似于 styled-components）。两者都会自动生成带作用域的类名。

安装 Emotion

根据您的需求，有两个软件包可供选择：

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

css() 函数

css() 函数可根据 CSS 对象或模板字面量生成类名：

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

使用 css() 的 CSS 对象

对象语法是模板字面量的另一种写法，适用于 TypeScript 自动补全：

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

styled() 接口

Emotion 的 styled 与 styled-components 的工作方式完全相同，方便在两者之间迁移：

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

css 属性（内联样式）

Emotion 的 css 属性让您可以直接在 JSX 元素上编写样式，无需额外的组件。此功能需要 @emotion/react 软件包以及 Babel/SWC 插件：

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

使用 Emotion 实现动态样式

两种接口都接受接收 props 的函数，以生成动态值：

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

全局样式

从 @emotion/react 使用 Global 来定义全局 CSS：

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion 与 styled-components 的比较

Emotion 和 styled-components 的接口几乎完全相同。在基准测试中，Emotion 的性能略好，软件包体积更小，并且额外提供了 css 属性。对于 React 应用，两者都是经过生产环境验证的选择。

Emotion 中的关键帧

使用 keyframes 辅助函数定义动画：

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

服务端渲染

Emotion 通过 extractCriticalToChunks() 支持 SSR，可在 Next.js 等 React 框架的服务端渲染过程中收集并注入关键 CSS。

快速检查

Emotion 的 css() 函数与 styled() 接口之间的主要区别是什么？

回顾

Emotion 提供两种主要的样式接口：css() 会生成类名（通过 className 应用），而 styled() 会创建带样式的 React 组件。css 属性支持类似内联样式的编写方式，同时具备完整的 CSS 能力。Emotion 与 styled-components 的接口高度兼容，而且通常速度更快。两种方式都会通过生成的类名自动为样式设置作用域。

常见问题解答

「Emotion：css() 与 styled()」课时是免费的吗？

是的 — 「Emotion：css() 与 styled()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Emotion：css() 与 styled()」这节课中我会学到什么？

使用 Emotion 的 css() 辅助函数和 styled() 组件工厂应用动态样式。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Emotion：css() 与 styled()」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy