React 中的 CSS-in-JS
CSS-in-JS 是一种将 CSS 样式嵌入 JavaScript 代码的技术。它让开发者用 JavaScript 语法编写 CSS 规则，为 React 应用提供更灵活、更模块化的样式管理方式。 这种方法在组件化架构盛行的今天尤其受欢迎，因为它能确保样式仅作用于特定组件，避免全局样式冲突。
在 React 中，CSS-in-JS 将样式与组件紧密绑定，提升样式的可维护性和可扩展性。 目前流行的 CSS-in-JS 库包括 styled-components、emotion 和 jss。
CSS-in-JS 的主要优势
- 作用域样式: CSS-in-JS 保证样式仅作用于单个组件，避免全局 CSS 冲突，提升应用的可维护性。
- 动态样式: 轻松利用 JavaScript 变量、props 和状态根据组件逻辑动态调整样式，例如根据按钮状态改变按钮颜色。
- 组件化样式: 样式与组件逻辑同处一处，方便管理，尤其在大型应用中更显优势，有利于构建模块化、易维护的代码库。
- 自动厂商前缀: 许多 CSS-in-JS 库（如 styled-components 和 emotion）自动添加厂商前缀，确保跨浏览器兼容性。
- 主题支持: CSS-in-JS 简化了全局主题的创建。开发者可在顶层定义配色方案、排版等共享样式，并动态应用到组件中。
主流 CSS-in-JS 库
1. styled-components
styled-components 是最流行的 CSS-in-JS 库之一。它允许在 JavaScript 文件中编写 CSS 代码，但样式作用域限制在各个组件内。
示例：使用 styled-components
<code class="bash">npm install styled-components</code>
<code class="javascript">import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
`;
const App = () => {
return (
<div>
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>
</div>
);
};
export default App;</code>
说明：
-
styled.button函数创建样式化的按钮组件。 - 样式仅作用于该按钮组件，不会影响其他按钮。
-
primaryprop 动态控制按钮背景颜色。
2. emotion
emotion 也是一个流行的 CSS-in-JS 库，提供强大的样式解决方案。它与 styled-components 类似，并额外提供性能优化和对服务器端渲染的更好支持。
立即学习“前端免费学习笔记（深入）”；
示例：使用 emotion
<code class="bash">npm install @emotion/react @emotion/styled</code>
<code class="javascript">/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';
const buttonStyles = (primary) => css`
background-color: ${primary ? 'blue' : 'gray'};
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
`;
const Button = styled.button`
${(props) => buttonStyles(props.primary)}
`;
const App = () => {
return (
<div>
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>
</div>
);
};
export default App;</code>
说明：
-
css函数创建样式定义，通过styledAPI 应用于组件。 - emotion 支持模板字面量和 JavaScript 对象编写样式。
3. jss (JavaScript Style Sheets)
jss 另一个 CSS-in-JS 库，允许用 JavaScript 编写 CSS。它提供对样式更精细的控制，支持自定义主题和更高级的样式逻辑。
示例：使用 jss
<code class="bash">npm install jss react-jss</code>
<code class="javascript">import React from 'react';
import { createUseStyles } from 'react-jss';
const useStyles = createUseStyles({
button: {
backgroundColor: (props) => (props.primary ? 'blue' : 'gray'),
color: 'white',
padding: '10px 20px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
'&:hover': {
opacity: 0.8,
},
},
});
const Button = (props) => {
const classes = useStyles(props);
return <button className={classes.button}>{props.children}</button>;
};
const App = () => {
return (
<div>
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>
</div>
);
};
export default App;</code>
说明：
-
createUseStyles钩子生成样式。 -
useStyles钩子接收 props 并返回按钮的类名。 - 支持基于 props 的动态样式。
CSS-in-JS 的挑战
CSS-in-JS 虽然有很多优点，但也存在一些挑战：
- 性能开销: 尤其在大型应用中，大量动态样式可能会带来性能开销。
- 捆绑包大小: 样式与 JavaScript 代码捆绑，可能增加 JavaScript 包大小。
- 学习曲线: 对于习惯传统 CSS 或预处理器 (如 Sass) 的开发者，需要一定的学习成本。
- 关注点分离: 一些开发者认为将样式和逻辑混合在一个文件中违反了关注点分离原则。
CSS-in-JS 的最佳实践
- 使用主题: 利用 CSS-in-JS 库的主题功能管理全局样式 (例如颜色、字体)。
- 保持样式作用域: 使用 styled-components 或 jss 保持样式作用域，避免全局样式冲突。
- 限制动态样式: 谨慎使用动态样式，避免过度使用影响性能。
- 使用合适的工具: 使用 Babel 等工具优化 CSS-in-JS 库的性能，例如压缩生成的 CSS。
结论
CSS-in-JS 是设计 React 应用的现代方法，它结合了 JavaScript 和 CSS 的优势。 通过 styled-components、emotion 或 jss 等库，开发者可在 JavaScript 文件中编写样式，提升代码库的模块化、性能和可维护性。 但在大型应用中，需要权衡 CSS-in-JS 的使用和潜在的性能影响。
