样式化的组件

样式化组件是在现代JavaScript中使用CSS的新方法之一。它的目的是成为CSS模块的继任者,一种编写范围仅限于单个组件且不会泄漏到页面中任何其他元素的CSS的方法

一个简短的历史

曾几何时,Web真的很简单,甚至CSS都不存在。我们使用桌子和框架。美好的时光。

然后CSS变得生动起来,一段时间后,人们逐渐意识到,框架可以极大地帮助您,尤其是在构建网格和布局方面,Bootstrap和Foundation在其中发挥了重要作用。

像这样的预处理器萨斯其他的帮助极大地减缓了框架的采用,并更好地组织了代码,诸如边界元SMACSS越来越多地使用,尤其是在团队内部。

约定不是解决所有问题的方法,并且记住起来很复杂,因此在最近几年中,随着越来越多的人采用JavaScript并在每个前端项目中构建流程,CSS找到了进入JavaScript的方式(CSS-in-JS)。

新工具探索了使用CSS-in-JS的新方法,其中一些成功并日渐流行:

  • 反应风格
  • jsxstyle

和更多。

引入样式化的组件

这些工具中最受欢迎的一种是样式化的组件

它是要成为的继任者CSS模块,这是一种编写CSS的方法,其范围仅限于单个组件,并且不会泄漏到页面中的任何其他元素。

(有关CSS模块的更多信息这里这里

样式化组件使您可以在组件中编写纯CSS,而不必担心类名冲突。

安装

使用安装样式组件npm或者

npm install styled-components
yarn add styled-components

而已!现在,您要做的就是添加此导入:

import styled from 'styled-components'

您的第一个样式化的组件

随着styled对象导入后,您现在就可以开始创建样式化组件了。这是第一个:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Button现在是反应发挥其最大作用。

我们使用样式对象的功能(称为button在这种情况下,并在其中传递了一些CSS属性模板文字

现在可以使用常规的React语法在我们的容器中呈现此组件:

render(<Button />)

样式化组件不仅提供其他功能,还可以用来创建其他组件button, 喜欢sectionh1input和许多其他。

带有反引号的语法一开始可能很奇怪,但是它被称为标记模板,它是纯JavaScript,是将参数传递给函数的一种方式。

使用道具自定义组件

当您将一些道具传递给样式组件时,它将把它们传递给DOM节点已安装。

例如,这是我们通过placeholdertype道具input成分:

const Input = styled.input`
  //...
`

render( <div> <Input placeholder="…" type=“text” /> </div> )

这将按照您的想法进行操作,将这些道具作为HTML属性插入。

道具而不是被盲目地传递给DOM也可以用于根据prop值定制组件。这是一个例子:

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`

render( <div> <Button>A normal button</Button> <Button>A normal button</Button> <Button primary>The primary button</Button> </div> )

设置primaryprop更改按钮的颜色。

扩展现有的样式化组件

如果您有一个组件,并且想要创建一个类似的组件,并且样式略有不同,则可以使用extend

const Button = styled.button`
  color: black;
  //...
`

const WhiteButton = Button.extend </span><span style="color:#e6db74"> color: white; </span><span style="color:#e6db74">

render( <div> <Button>A black button, like all buttons</Button> <WhiteButton>A white button</WhiteButton> </div> )

这是普通的CSS

在样式化组件中,您可以使用已经了解和喜爱的CSS。这是纯CSS。它不是伪CSS也不是内联CSS,它有其局限性。

您可以使用媒体查询,套料以及您可能需要的其他任何东西。

这是媒体查询的示例:

const Button = styled.button`
  color: green;
  @media screen and (max-width: 800px) {
    color: black;
  }
`

使用供应商前缀

样式化组件会自动添加所需的所有供应商前缀,因此您无需担心此问题。

结论

这就是“样式化组件”的介绍!这些概念将帮助您理解该概念,并通过在JavaScript中使用CSS的这种方式来帮助您入门和运行。

免费下载我的反应手册


更多反应教程: