本文已整理到 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