CSS-in-JS 教程

1. 什么是 CSS-in-JS？

CSS-in-JS 是一种将 CSS 样式直接嵌入到 JavaScript 代码中的技术。它允许开发者在组件级别管理样式，从而实现更细粒度的样式控制和更好的模块化。CSS-in-JS 的主要优势在于它能够与 React、Vue 等现代前端框架无缝集成，提供动态样式和更好的开发体验。

1.1 CSS-in-JS 的历史

CSS-in-JS 的概念最早由 Facebook 的工程师在 2014 年提出，旨在解决传统 CSS 在大型应用中的维护问题。随着 React 的流行，CSS-in-JS 逐渐成为前端开发的主流技术之一。

1.2 CSS-in-JS 的优势

• 模块化：每个组件都有自己的样式，避免了全局样式的冲突。
• 动态样式：可以根据组件的状态动态生成样式。
• 更好的开发体验：与 JavaScript 代码紧密结合，减少了上下文切换。

2. 常见的 CSS-in-JS 库

目前市面上有许多流行的 CSS-in-JS 库，其中最受欢迎的是 styled-components 和 Emotion。

2.1 styled-components

styled-components 是最早也是最流行的 CSS-in-JS 库之一。它使用模板字符串来定义样式，并将其与 React 组件紧密结合。

示例代码

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

function App() {
  return <Button>Click me</Button>;
}

2.2 Emotion

Emotion 是另一个强大的 CSS-in-JS 库，它提供了类似 styled-components 的功能，并且支持更多的自定义选项。

示例代码

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

const buttonStyle = css`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

function App() {
  return <button css={buttonStyle}>Click me</button>;
}

3. 实践练习

3.1 创建一个带有动态样式的按钮

在这个练习中，我们将创建一个按钮组件，并根据按钮的状态（如 disabled）动态改变样式。

步骤

1. 安装 styled-components：

   npm install styled-components
   

2. 编写代码：

   import React, { useState } from 'react';
   import styled from 'styled-components';
   
   const Button = styled.button`
     background: ${props => (props.disabled ? 'gray' : 'palevioletred')};
     color: white;
     font-size: 1em;
     margin: 1em;
     padding: 0.25em 1em;
     border: 2px solid palevioletred;
     border-radius: 3px;
     cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   `;
   
   function App() {
     const [isDisabled, setIsDisabled] = useState(false);
   
     return (
       <div>
         <Button disabled={isDisabled} onClick={() => setIsDisabled(!isDisabled)}>
           Click me
         </Button>
       </div>
     );
   }
   
   export default App;
   

3. 运行应用：

   npm start
   

3.2 使用 Emotion 创建一个带有主题的按钮

在这个练习中，我们将使用 Emotion 创建一个带有主题的按钮组件。

步骤

1. 安装 @emotion/react 和 @emotion/styled：

   npm install @emotion/react @emotion/styled
   

2. 编写代码：

   import React from 'react';
   import styled from '@emotion/styled';
   import { ThemeProvider } from '@emotion/react';
   
   const theme = {
     primary: 'palevioletred',
     secondary: 'white',
   };
   
   const Button = styled.button`
     background: ${props => props.theme.primary};
     color: ${props => props.theme.secondary};
     font-size: 1em;
     margin: 1em;
     padding: 0.25em 1em;
     border: 2px solid ${props => props.theme.primary};
     border-radius: 3px;
   `;
   
   function App() {
     return (
       <ThemeProvider theme={theme}>
         <Button>Click me</Button>
       </ThemeProvider>
     );
   }
   
   export default App;
   

3. 运行应用：

   npm start
   

4. 总结

CSS-in-JS 是一种强大的技术，它将 CSS 与 JavaScript 紧密结合，提供了更好的模块化、动态样式和开发体验。通过使用 styled-components 和 Emotion 等库，开发者可以轻松地在现代前端应用中实现复杂的样式管理。

4.1 下一步

• 探索更多的 CSS-in-JS 库，如 JSS 和 Linaria。
• 学习如何在大型应用中组织和管理 CSS-in-JS 代码。
• 尝试将 CSS-in-JS 与其他前端技术（如 TypeScript、GraphQL）结合使用。

希望这篇教程能帮助你更好地理解和使用 CSS-in-JS 技术！