使用 Styled Components 编写样式化组件

本文已整理到 Github，地址 👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

---

Styled Components 是一个 CSS-in-JS 库，可让您编写常规 CSS 并将其附加到 JavaScript 组件。使用 styled-components，您可以使用您已经熟悉的 CSS，而不必学习新的样式结构。

本文将介绍 Styled Components 的一些功能，并提供一些示例帮助您理解。

styles 继承

我们可以通过简单地将样式组件传递给 styled 函数来继承样式组件的样式。

import styled from 'styled-components'

const Div = styled.div`
  padding: 10px;
  color: palevioletred;
`

这里我们有一个 Div 样式的组件。让我们创建另一个 div 元素来继承该组件的样式。

const InheritedDiv = styled(Div)`
  border: 1px solid palevioletred;
`

InheritedDiv 将具有 Div 组件的样式以及它自己的样式。

padding: 10px;
color: palevioletred;
border: 1px solid palevioletred;

传递 props

props 可以传递给样式化组件，就像它们与常规 React 组件(类或函数)一样。这是可能的，因为样式化组件实际上是 React 组件。

const Button = styled.button`
  padding: 2px 5px;
  color: white;
  border-radius: 3px;
`

const Div = styled.div`
  padding: 10px;
  color: palevioletred;
  border: 1px solid palevioletred;
`

styled-components 创建了一个 React 组件&#x