React 中的 styled-components 入门

如果你正在寻找一种在 React 中编写易于维护且可移植的 CSS 的方法，那么你可能会对styled-components库感兴趣。它是众多JS库中的 CSS 库之一，可以帮助你避免处理庞大而笨重的文件时可能遇到的一些麻烦.css。

那么 JS 中的 CSS 到底是什么？

使用纯 CSS 时，您需要在一个文件中定义 CSS：

.saveButton {
  color: green;
}

className并通过React 代码中的 prop引用它：

export const App = () => <button className='saveButton'>Save</button>

随着代码库的规模不断扩大，管理这些 CSS 文件会变得非常困难，并且 CSS 类的命名将变得非常重要（有时甚至很复杂）——您必须记住，您定义的 CSS 对整个应用程序来说是全局的，并确保您不会遇到命名冲突！

另一方面，JS 库中的 CSS 允许你在 JavaScript 文件中定义 CSS 。例如，使用 styled-components 看起来会像这样：

import styled from 'styled-components';

// Creates a <button> with the style "color: green"
const SaveButton = styled.button`
  color: green;
`;

export const App = () => <SaveButton>Save</SaveButton>

这样做的好处是，当使用时SaveButton，这些 CSS 只会应用于它所包裹的内容，而不会应用于其他部分。当然，它还有其他很酷的好处，比如能够使用 props，我们将在本指南的后面部分进行探讨。

班级名称去哪儿了？

你可能已经注意到，我们不再定义 CSS 类名了—— styled-components 已经在后台为我们完成了！如果你查看一下你的 React 应用的源代码，你会看到类似这样的内容：

<style>
  .cPQVKZ { color: green; }
</style>

<!-- Other stuff goes here... -->

<button class="sc-AxjAm cPQVKZ">Save</button>

每个 React 组件都会有两个随机生成的类名：

第一个（以开头sc-）是对样式组件本身的引用SaveButton，并且不会附加任何样式
第二个（在本例中cPQVKZ）将包含在SaveButton

使用样式化的 API

到目前为止，我们已经看到了styled.button，但我们也可以在它的位置使用任何 HTML 标签，例如h1或div：

const Header = styled.h1`
  font-size: 16px;
`;

const CoolDiv = styled.div`
  padding: 8px;
`;

我们也可以使用其他样式的组件，并继承它们的所有样式（并覆盖任何相同的样式）：

const BoringButton = styled.button`
  color: blue;
`;

const CoolButton = styled(BoringButton)`
  color: pink;
`;

传递 props

样式化组件的另一个神奇之处在于您可以传递道具！

const CoolButton = styled.button`
  color: ${props => props.color};
`;

export const App = () => (
  <>
    <CoolButton color="yellow"/>
    <CoolButton color="green"/>
  </>
);

源代码最终看起来是这样的：

<style>
  .jUNwe { color: yellow; }
  .krQJtN { color: green; }
</style>

<!-- Other stuff goes here... -->

<button color="yellow" class="sc-AxjAm jUNwe">Save</button>
<button color="green" class="sc-AxjAm krQJtN">Save</button>

您可以看到，对于我们为colorprops 使用的每个值，都会创建一个新的 CSS 类。我们还可以看到sc-AxjAm每个按钮中的类都是相同的——因为这个类名指的是按钮CoolButton本身，并且无论 props 如何变化都不会改变。

使用 css 辅助函数

我们可以使用辅助函数定义 CSS 样式css：

import { css } from 'styled-components';

const whiteColor = css`
  color: white;
`;

如果您有一组要在多个样式组件中使用的通用样式，这会很方便：

const Button = styled.button`
  ${whiteColor};
  background-color: red;
`;

const AnotherButton = styled.button`
  ${whiteColor};
  background-color: green;
`;

中定义的样式whiteColor不会成为其自己的单独类，但会添加到为Button和生成的 CSS 类中AnotherButton。

修改已设置样式的组件子项的样式

如果您创建了一个样式组件，并且需要更改其某个子组件的样式，则可以添加选择器：

const Button = styled.button`
  .h1 {
    color: pink;
  }
`;

引用.h1将适用于任何深度的子级 - 如果您只想引用任何直接子级，则需要使用> .h1。

引用其他样式组件

除了引用标签名称之外，您还可以引用其他样式的组件！

const ChildButton = styled.button`
    color: pink;
`;

const CoolDiv = styled.div`
  ${ChildButton} {
    color: green;
  }
`;

export const App = () => (
  <>
    <CoolDiv>
      <ChildButton>Click me</ChildButton>
    </CoolDiv>
  </>
);

这将覆盖原来的样式ChildButton。

styled-components库是目前 JS 库中最大、最流行的 CSS，因此使用互联网上提供的所有文档和帮助可以非常轻松地开始使用它。

但是，如果您仍在寻找 JS 库中的 CSS，我还建议您查看一些替代方案，例如emotion和linaria，看看它们是否适合您。

感谢阅读！

文章来源：https://dev.to/emma/getting-started-with-styled-components-in-react-47m5