CSS-in-JS：样式管理的新范式与优缺点

CSS-in-JS是一种将CSS和JavaScript深度结合的方法，它的主要优势在于，它可以避免全局样式表的问题，例如类名冲突和潜在的样式泄露。

优点：

1. 避免全局样式冲突：每个组件的样式都是局部的，不会影响其他组件。
2. 样式作为JavaScript的一部分管理：更容易维护和理解。
3. 可以使用JavaScript动态创建样式：例如，根据用户的交互或数据动态改变样式。

缺点：

1. 增加了JavaScript的负担：每个组件都需要处理样式的逻辑，可能会增加bundle的大小。
2. 可能会增加样式的计算成本：每次组件渲染时，都需要计算新的样式字符串。
3. 不易于在非React环境中使用：CSS-in-JS库通常与特定的框架（如React）绑定。

解决方案：

import styled from 'styled-components';
 
// 创建一个带样式的按钮组件
const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'green'};
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
`;
 
// 使用组件
function Button({ label, primary }) {
  return <StyledButton primary={primary}>{label}</StyledButton>;
}

在这个例子中，我们使用了styled-components库来创建一个可以根据传入的primary属性改变颜色的按钮组件。这种方法使得样式和组件逻辑紧密结合，易于维护和理解。