样式化组件 101 💅 讲座 1：React 环境中的介绍 + 设置 ⚛️

什么是 Styled Components？💅

安装🖥

让样式组件准备好与 React 一起使用⚛️

创建我们的第一个样式组件🐣

通过props来设置组件的样式

有条件地设置组件的样式

从另一个组件继承样式👨‍👧‍👦

我可以使用 SASS 或 LESS 等 CSS 预处理器来编写样式而不是纯 CSS 吗？

那么，这意味着我也可以在样式组件中添加嵌套的伪元素了，对吧？🤔

大家好！👋欢迎收听Styled Components 101 系列
的第一讲。

在本系列中，我们将全面介绍与 Styled Components 相关的不同主题。

还不知道什么是 Styled Components？看来你很幸运，因为我们现在就开始第一课！👇

什么是 Styled Components？💅

Styled Components 是一种现代工具，用于从最基本的 HTML 元素生成组件，它还允许您利用标记模板文字功能在 JavaScript 中为它们编写自定义 CSS 样式。

Styled Components摆脱了组件和样式之间的映射，因此，在声明 CSS 时，您实际上是在创建一个附加有其自身样式的常规 React 组件。

安装🖥

如果你使用npm：

npm install styled-components

如果你使用纱线：

yarn add styled-components

让样式组件准备好与 React 一起使用⚛️

最棒的是：无需额外配置即可在 React 中使用 Styled Components。在接下来的课程中，我们将学习如何配置 Styled Components，使其与 Next.js 等框架协同工作，以及如何将它们与 SSR（服务器端渲染）集成。目前，React 端一切就绪。如果您想进一步了解，请继续关注本系列的 Styled Components 😺

创建我们的第一个样式组件🐣

定义样式化组件有几种方法。我个人最喜欢的是保持组件独立，在其自己的文件中定义，就像我们通常对 React 组件所做的那样。虽然从概念上讲，这是保持应用程序正确模块化并充分利用抽象的最佳方法，但在另一个组件中声明样式化组件的方法也得到了广泛的扩展。虽然这不是我最喜欢的，但同样有效。

我们的第一个样式组件是Button。让我们看看如何使用 Styled Components 语法来定义它：

StyledButton.js

import styled from "styled-components";

export default styled.button`
   background-color: #7b4cd8;
   color: #fff;
   padding: 10px;
   border: none;
   border-radius: 5px;
   font-size: 1.25rem;
`

正如您在上面的示例中看到的，我们在反引号内使用纯 CSS 语法，以使 JavaScript 能够理解我们的样式。

然后，我们只需将组件导入到我们想要渲染的任何位置：

import StyledButton from "./components/StyledButton";

const MyApp = () => {
   ...
   return(
      <StyledButton>I am a styled button! 😼</StyledButton>
   )
   ...
}

export default MyApp;

我们的第一个样式按钮将如下所示：

通过props来设置组件的样式

在前面的例子中，所有样式都已由我们预先定义，并且每个渲染都StyledButton将具有完全相同的外观。

但是，我们可以多次渲染同一类型的组件来创建不同的组件并为其应用不同的样式吗？答案是肯定的，为了实现此行为，我们将使用自定义值的props 传递给样式按钮。

假设我们想要三个具有不同背景和文本颜色但具有相同填充、边框半径和字体大小的按钮。

然后，我们将做这样的事情：

StyledButtonWithProps.js

import styled from "styled-components";

export default styled.button`
   background-color: ${props => props.bg};
   color: ${props => props.color};
   padding: 10px;
   border: none;
   border-radius: 5px;
   font-size: 1.25rem;
`

现在让我们调用我们的三个按钮：

import StyledButtonWithProps from "./components/StyledButtonWithProps";

const MyApp = () => {
   ...
   return(
      <StyledButtonWithProps bg="#ffc3c3" color="#b6201e">Button 🍓</StyledButtonWithProps>
      <StyledButtonWithProps bg="#ffdaca" color="#d85d16">Button 🍑</StyledButtonWithProps>
      <StyledButtonWithProps bg="#fff4c7" color="#bb9922">Button 🍋</StyledButtonWithProps>
   )
   ...
}

export default MyApp;

结果如下：

有条件地设置组件的样式

现在让我们看看如何通过添加一些条件来设置按钮组件的样式。

这次，假设我们希望根据按钮的类型值为按钮设置不同的背景颜色，该背景颜色将通过buttonType 属性传递给组件。

那么我们应该做以下事情：

StyledButton.js

import styled from "styled-components";

export default styled.button`
   ${props => props.buttonType && props.buttonType==="primary" ?
   `background-color: #7b4cd8; color: #fff; font-size: 1.25rem;` :
   `background-color: #ff31ca; color: #ffe6f9; font-size: 0.95rem;`};
   padding: 10px;
   border: none;
   border-radius: 5px;
`

如果buttonType 属性存在且值为primary，则组件将获取第一组样式属性。否则，获取第二组。

请注意，在条件块之外定义的样式属性对于所有组件保持不变。

现在让我们调用按钮：

import StyledButton from "./components/StyledButton";

const MyApp = () => {
   ...
   return(
      <StyledButton buttonType="primary">I am a Primary Button! 👆</StyledButton>
      <StyledButton>I am a different kind of button! 👇</StyledButton>
   )
   ...
}

export default MyApp;

我们就是这样的：

从另一个组件继承样式👨‍👧‍👦

尽管上述使用组件 props 传递样式属性的方法在每种情况下都很有效，但如果我们的应用程序开始增长，我们会发现创建组件的过程繁琐且重复。

现在构造函数就派上用场了：我们可以有一个超级组件（就像超类一样，引用 OOP 中的继承🤓），它的样式可以被其他组件继承。

这意味着从超级组件继承的每个子组件除了拥有自己的自定义样式外，还将具有超级组件样式。

让我们看看如何连接它们：

SuperButton.js

import styled from "styled-components";

export default styled.button`
   color: #fff;
   width: 200px;
   height: 50px;
   border: none;
   border-radius: 5px;
   font-size: 1.25rem;
`

ChildrenButton.js

import styled from "styled-components";
import SuperButton from "./SuperButton";

export default styled(SuperButton)`
   background-color: ${props => props.bg};
`

现在让我们把他们都叫出来：

import ChildrenButton from "./components/ChildrenButton";

const MyApp = () => {
   ...
   return(
      <ChildrenButton bg="deeppink">Hello! 👋 </ChildrenButton>
      <ChildrenButton bg="hotpink">Hello! 👋 </ChildrenButton>
      <ChildrenButton bg="coral">Hello! 👋 </ChildrenButton>
   )
   ...
}

export default MyApp;

结果如下：

我可以使用 SASS 或 LESS 等 CSS 预处理器来编写样式而不是纯 CSS 吗？

不是。但你仍然可以使用它们最常用的功能。

Styled Components 基于CSS-in-JS范式，因此从技术上讲，我们需要使用纯 CSS 来定义它们。但是，我们可以模拟预处理器的行为：例如，Styled Components 允许我们定义变量和嵌套选择器。

以下代码片段在 Styled Components 中是正确的：

StyledDiv.js

import styled from "styled-components";

export default styled.div`
   p{
      font-family: 'Arial', sans-serif;
      font-size: 1.5rem;
      color: deeppink;
      &.primary{
         font-weight: bold;
      }
   }
`

并且这样称呼它...

import StyledDiv from "./components/StyledDiv";

const MyApp = () => {
   ...
   return(
      <StyledDiv>
         <p className="primary">Hello from a Styled Div!</p>
      </StyledDiv>
   )
   ...
}

export default MyApp;

...这就是我们得到的：

这种行为是可行的，因为 Styled Components在底层使用了一个名为stylis的预处理器，因此它支持类似 scss 的语法，这对于嵌套和开箱即用地使用伪元素和伪类非常酷。

那么，这意味着我也可以在样式组件中添加嵌套的伪元素了，对吧？🤔

绝对是的。

这次，我们将定义一个<p>元素来向其附加一些内容。让我们更进一步，根据条件添加这些内容。

StyledP.js

import styled from "styled-components";

export default styled.p`
   {$props => props.before ? `
   color: #7b4cd8;
   &::before {
      content: "${props.before}";
   }` : 
   `color: #ff31ca;`
   }
`

import StyledP from "./components/StyledP";

const MyApp = () => {
   ...
   return(
      <StyledP before="_">CODE</StyledP>
      <StyledP>I don't have a ::before 😢</StyledP>
   )
   ...
}

export default MyApp;

瞧：

如果找到了名为before 的prop，它的值将被附加到元素前面，并且组件将接收指定的文本颜色。否则，由于条件永远不会满足，组件唯一能获得的样式属性就是颜色。<p>

这就是第一节 Styled Components 101 讲座的全部内容！

在接下来的剧集中，我们将继续深入探讨 Styled Components 的所有令人惊叹的功能以及如何将它们集成到我们的项目中。

希望您觉得这篇文章有用，我们下期再见👋

🎉 不要忘记在Instagram和Twitter上关注@underscorecode，获取更多每日 webdev 内容 🖥🖤

最后但同样重要的一点是...在我们离开之前有一个快速的友情提醒😊

我们都知道，编程和开发有无数种方法可以完成任务，而我们在这里是为了提供帮助和学习。所以，如果您知道其他人分享的方法（不更好，也不更差，只是不同），请随意分享，但请始终保持友善和尊重，以尊重作者和社区其他成员。谢谢您，祝您编程愉快！

文章来源：https://dev.to/underscorecode/styled-components-101-lecture-1-introduction-setup-in-a-react-environment-476c