编辑“︁Next.js CSS-in-JS”︁（章节）

== 核心概念 ==
=== 1. 基本语法 ===
CSS-in-JS 的核心思想是通过 JavaScript 模板字符串或对象语法定义样式。以下是一个使用 `styled-components` 的示例：

<syntaxhighlight lang="javascript">
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

// 使用组件
function App() {
  return (
    <div>
      <Button>普通按钮</Button>
      <Button primary>主要按钮</Button>
    </div>
  );
}
</syntaxhighlight>

'''输出效果'''：
* 第一个按钮为灰色背景。
* 第二个按钮为蓝色背景（通过 `primary` prop 动态设置）。

=== 2. 样式动态化 ===
CSS-in-JS 支持基于组件状态或 props 的动态样式。例如：
<syntaxhighlight lang="javascript">
const DynamicBox = styled.div`
  width: 100px;
  height: 100px;
  background: ${({ theme }) => theme.colors.primary};
  opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
`;
</syntaxhighlight>

=== 3. 主题支持 ===
多数 CSS-in-JS 库支持主题机制。以 `ThemeProvider` 为例：
<syntaxhighlight lang="javascript">
import { ThemeProvider } from 'styled-components';

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

function App() {
  return (
    <ThemeProvider theme={theme}>
      <DynamicBox isActive={true} />
    </ThemeProvider>
  );
}
</syntaxhighlight>