CSS-in-JS 是用 JavaScript 函数或对象生成作用域隔离的 CSS 规则，非字符串拼接，而是通过库编译为带哈希的 class 名并注入 style 标签。
什么是 CSS-in-JS，它真在 JS 里写 CSS 吗
是的，但不是字符串拼接那种“写”。CSS-in-JS 是一种将样式逻辑与组件逻辑耦合的技术模式，核心是用 JavaScript 函数或对象生成可复用、作用域隔离的 CSS 规则。它不等于 element.style 内联样式，也不等于把 CSS 当字符串塞进 document.createElement('style')——而是通过库（如 styled-components、@emotion/react）把样式定义编译成真实 class 名，并注入 <style> 标签。
用 styled-components 写一个带 props 的按钮组件
这是最典型的入门场景：需要根据 variant 或 disabled 动态切换样式。关键在于模板字符串里的插值语法和自动哈希类名机制。
import styled from 'styled-components';
<p>const Button = styled.button`
padding: 8px 16px;
border: none;
border-radius: 4px;
background-color: ${props => props.variant === 'primary' ? '#007bff' : '#6c757d'};
color: white;
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};</p><p>&:hover:not(:disabled) {
opacity: 0.9;
}
`;</p><p>// 使用
<Button variant="primary" disabled={false}>提交</Button>- 插值必须用
${...}，且内部只能是函数（接收props）或简单表达式；直接写字符串如${'red'}会失效 - 伪类、媒体查询可直接写，无需额外 API；但
:disabled这类状态需配合 props 判断，因为 DOM 状态不会自动同步到样式函数 - 生成的 class 名类似
sc-bdVaJa kJjQqA，确保样式不污染全局
@emotion/react 的 css prop 和 css 函数区别
两种主流写法，适用不同粒度：前者适合单个元素快速覆盖，后者适合提取可复用样式对象。
/** 方式一：css prop（需开启 babel 插件 @emotion/babel-plugin） */
import { jsx } from '@emotion/react';
/** @jsxImportSource @emotion/react */
<p><div
css={<code> color: blue; font-weight: bold; @media (min-width: 768px) { font-size: 18px; } </code>}
/></p><p>/*<em> 方式二：css 函数 + className </em>/
import { css } from '@emotion/react';</p><p>const headingStyle = css<code> margin: 0; line-height: 1.2; </code>;</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2457" title="PathFinder"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/176646000963539.png" alt="PathFinder" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2457" title="PathFinder">PathFinder</a>
<p>AI驱动的销售漏斗分析工具</p>
</div>
<a href="/ai/2457" title="PathFinder" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><p><h1 className={headingStyle}>标题</h1>-
css函数返回的是一个唯一 hash 字符串（如css-1a2b3c），不是对象，不能直接当对象用 -
cssprop 写法更紧凑，但要求 JSX 编译支持；若用 TypeScript，需补充declare module '@emotion/react'声明 - 两种方式都支持主题变量：
props => ({ colors }) => css`color: ${colors.text};`
为什么不能直接在 JS 里用对象写标准 CSS？
因为 CSS 属性名和 JS 对象键名规则冲突：比如 font-size 不能作属性名，background-image 需转为 backgroundImage；同时，纯对象无法表达嵌套（&）、伪类、媒体查询等 CSS 特性。
- 像
{ 'font-size': '14px' }这种写法只适用于Object.assign(element.style, ...)，属于内联样式，不支持选择器、伪类、优先级控制 - 所有成熟 CSS-in-JS 库都在底层做了驼峰转换、自动加前缀、SSR 支持、服务端渲染时样式提取等——这些不是靠手写对象能解决的
- 如果你只是想动态改几个样式，
useState+style属性已足够；只有需要组件级封装、主题、响应式、条件样式时，才值得引入 CSS-in-JS
CSS-in-JS 的真正门槛不在语法，而在理解「样式即函数」：它依赖运行时求值，意味着每次 props 变化都可能触发样式重新计算，过度嵌套插值或在 render 中创建新样式函数，容易引发性能问题。
