CSS Academy · 课时

Styled-components：带标签的模板字面量

Q: 「Styled-components：带标签的模板字面量」这节课中我会学到什么？

使用 styled-components 库，通过带标签的模板字面量创建带样式的 React 组件。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 styled-components 库，通过带标签的模板字面量创建带样式的 React 组件。

第 1 / 4 课13 个步骤

Styled-components：带标签的模板字面量 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 styled-components？

styled-components 是一个用于 React 的 CSS-in-JS 库，允许您使用带标签的模板字面量直接在 JavaScript 文件中编写 CSS。每个样式化组件都会自动获得唯一且具有作用域的类名。

带标签的模板字面量

JavaScript 带标签的模板字面量允许函数处理模板字符串。styled-components 使用它来解析 CSS：

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

使用属性实现动态样式

在模板字面量中访问组件属性，以实现动态样式：

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

CSS 自定义属性替代方案

对于更简单的动态值，优先使用 CSS 自定义属性，而不是由属性驱动的逻辑——这样性能更好，也能减少 JavaScript 插值：

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

扩展样式

扩展现有的样式化组件以添加样式：

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

嵌套与 & 选择器

styled-components 支持类似 Sass 的嵌套，可以使用 & 引用父级：

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

使用 createGlobalStyle 定义全局样式（重置样式和基础样式）：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

styled-components 提供了 ThemeProvider，用于在组件中访问主题令牌：

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>

性能注意事项

styled-components 会在运行时生成类名。对于性能要求较高的应用，可以考虑使用 Babel 插件进行静态提取，或切换到 Vanilla Extract、CSS Modules 等零运行时替代方案。

服务器端渲染

styled-components 通过 ServerStyleSheet API 支持 SSR，可以在服务器渲染期间收集并注入样式，从而避免无样式内容闪现。

替代方案与生态系统

styled-components 生态系统包括：emotion（类似的 API）、linaria（零运行时）、Vanilla Extract（类型安全）和 Panda CSS（实用工具优先）。它们分别在运行时开销、DX 和性能之间进行取舍。

快速检查

styled-components 如何防止不同组件之间的类名冲突？

在交互式课程中回答

回顾

styled-components 使用带标签的模板字面量，在 React 组件旁定义 CSS。您可以通过 JavaScript 插值让组件属性驱动动态样式。组件可以通过 ThemeProvider 进行扩展、嵌套并支持主题。对于生产环境，可以考虑使用 Babel 插件进行静态提取，并支持服务器端渲染。对于零运行时替代方案，请评估 Vanilla Extract 或 CSS Modules。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「Styled-components：带标签的模板字面量」课时是免费的吗？

是的 — 「Styled-components：带标签的模板字面量」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Styled-components：带标签的模板字面量」这节课中我会学到什么？

使用 styled-components 库，通过带标签的模板字面量创建带样式的 React 组件。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「Styled-components：带标签的模板字面量」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 CSS Academy