Styled-components，在React中处理CSS的现代方式

使用 React 时，在使用 CSS-in-JS 处理样式时，您有很多选择。您可以在我们的 CSS-in-JS Roundup 中了解很多可用选项。

大多数库都有生命周期。它们越来越受欢迎，然后被更好的解决方案所取代。

💅 styled-components 是其流行高峰期的库之一。

易于上手

styled-components 的创建者也是 react-boilerplate 的维护者，这是建立 React 项目的最流行的方式之一。

样板包括样式组件，如果您从头开始一个新的应用程序，那么只使用样板是非常有意义的。

首先，克隆 repo：

$ git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git

…然后将 cd 放入其中并运行 npm run setup。

样板提供了一个示例应用程序，可以非常方便地开始深入研究样式化组件。

使用 npm start 快速启动它，然后通过 http://localhost:3000 访问您的应用程序。

示例应用程序中的组件已经在使用样式化组件。示例参见 app/containers/App/index.js：

应用程序/容器/应用程序/index.js

// ...other imports
import styled from 'styled-components';

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  /* ... */
`;

export default function App() {
  return (
    <AppWrapper>
      {/* ... */}
    </AppWrapper>
  );
}

这是与 AppWrapper 容器关联的样式化组件，负责呈现页面包装器。输出的 DOM 将是一个应用了样式的 div 元素。

样板文件使用热重新加载，因此您可以调整某些内容、保存文件并将更改应用于页面。

尝试将自定义 max-width 设置为 500px：

const AppWrapper = styled.div`
  max-width: 500px;
  /* ... */
`;

并保存文件：

您刚刚编辑了您的第一个样式化组件！ 🎉

忘记上课

如您所见，没有任何东西可以将您刚刚编辑的样式链接到它的容器。没有 className，您可以在 CSS 中使用它来将样式链接到元素。

使用 CSS 构建 Web 界面时通常的工作流程是：

您创建一个具有唯一类或 id 属性的 HTML 结构
您可以使用 CSS 中的类或 id 选择器来定位页面中的元素

这需要保持同步，以防您需要更改它们。它还要求您研究可以容纳所有元素的命名结构。

如果您在一个团队中，这通常意味着具有可能难以执行的命名约定。不是在布置项目的初始结构时，而是在进行快速修复时很容易绕过。 styled-components 为您动态创建类，为您的所有元素使用唯一的类名。

这保证了没有样式可以泄漏到其他元素，就像在整个页面重用类名时可能发生的那样。

这只是 CSS

一些现有的 CSS-in-JS 库允许您以 JavaScript 对象的形式在 JavaScript 中编写 CSS。这需要一些认知负担，对于许多了解 CSS 但不了解 JavaScript 的设计师来说，这是一个入门障碍。

styled-components 依赖于 JavaScript 模板文字来让您编写实际的 CSS，可以简单地从您的 CSS 文件中复制粘贴。

唯一需要注意的是，媒体查询使用“特殊语法”，您可以省略选择器，而不是：

@media (max-width: 700px) {
 .app-wrapper {
    background: white;
 }
}

你写：

const AppWrapper = styled.div`
  /* ... */
  @media (max-width: 700px) {
    background: white;
  }
`;

它使 CSS 更简单更好

styled-components “只是 CSS”，只是稍微增强的 CSS。

它允许 CSS 嵌套，这是常见 CSS 预处理器的主要便利之一。让我们通过翻转页面中的任何图像来进行快速测试：

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  /* ... */

  img {
    transform: scaleX(-1);
  }
`;

它还使用 inline-style-prefixer 为您处理供应商前缀。在上面的示例中，使用 transform 将这些供应商前缀添加到生成的 CSS：

.fpcXGq img {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

自定义组件

如果你想让右键变成灰色而不是蓝色，很容易覆盖这个特定的 CSS 属性。这些按钮是 HeaderLink 的两个实例，它是来自 react-router-dom 的链接组件，应用了一些样式：

/app/components/Header/HeaderLink.js

import { Link } from 'react-router-dom';
import styled from 'styled-components';

export default styled(Link)`
  /* ... */
  border: 2px solid #41ADDD;
  color: #41ADDD;

  /* ... */
`;

现在，如果你想创建一个灰色按钮，这很容易：

/app/components/Header/GrayHeaderLink.js

import styled from 'styled-components';
import HeaderLink from './HeaderLink';

const GrayHeaderLink = styled(HeaderLink)`
  color: darkgray;
  border: 2px solid darkgray;
`;

现在在你的 JSX 中使用这个组件，来自：

<NavBar>
 <HeaderLink to="/">
   {/* ...children */}
 </HeaderLink>

 <HeaderLink to="/features">
   {/* ...children */}
 </HeaderLink>
</NavBar>

到：

<NavBar>
 <GrayHeaderLink to="/">
   {/* ...children */}
 </GrayHeaderLink>

 <GrayHeaderLink to="/features">
   {/* ...children */}
 </GrayHeaderLink>
</NavBar>

当您不拥有自己的组件时，这种方法非常有效。在这种情况下，Link 来自 react-router-dom 包，我们无法控制它。

否则就更简单了。这是按钮的默认样式：

应用程序/组件/按钮/buttonStyles.js

import { css } from 'styled-components';

const buttonStyles = css`
  /* ... */
  border: 2px solid #41addd;
  color: #41addd;

  /* ... */
`;

export default buttonStyles;

你会注意到 css 助手的使用，它允许在你的 CSS 规则中使用插值。

在模板字面量中插入一个简单的 prop 将允许我们通过根据 prop 值选择颜色来在组件中拥有不同的样式：

const buttonStyles = css`
  /* ... */

  border: 2px solid ${(props) => props.gray ? 'darkgray' : '#41addd'};
  color: ${(props) => props.gray ? 'darkgray' : '#41addd'};

  /* ... */
`;

然后使用如下语法导出 StyledButton 组件：

/app/components/Button/StyledButton.js

import styled from 'styled-components';

import buttonStyles from './buttonStyles';

const StyledButton = styled.button`${buttonStyles}`;

export default StyledButton;

现在，您只需编写以下内容即可使按钮变为灰色：

<StyledButton gray />

学到更多

这是冰山一角。 styled-components 允许您执行更高级的配置。

在官方文档中了解所有styled-components可以提供的。