样式组件化_样式化的组件

最新推荐文章于 2024-02-26 09:17:27 发布

cuk0051

最新推荐文章于 2024-02-26 09:17:27 发布

阅读量368

点赞数

文章标签： vue java css react javascript ViewUI

原文链接：https://flaviocopes.com/styled-components/

版权

样式组件化

一个简短的历史 (A brief history)

Once upon a time, the Web was really simple and CSS didn’t even exist. We laid out pages using tables and frames. Good times.

从前，Web真的很简单，甚至CSS都不存在。我们使用表格和框架布置页面。美好的时光。

Then CSS came to life, and after some time it became clear that frameworks could greatly help especially in building grids and layouts, Bootstrap and Foundation playing a big part in this.

然后CSS诞生了，经过一段时间后，人们逐渐意识到框架可以极大地帮助尤其是在构建网格和布局中，Bootstrap和Foundation在其中起着很大的作用。

Preprocessors like SASS and others helped a lot to slow down the adoption of frameworks, and to better organize the code, conventions like BEM and SMACSS grew in use, especially within teams.

SASS之类的预处理器和其他帮助极大地减缓了框架的采用速度，并更好地组织了代码，诸如BEM和SMACSS之类的约定日益流行，尤其是在团队内部。

Conventions are not a solution to everything, and they are complex to remember, so in the last few years with the increasing adoption of JavaScript and build processes in every frontend project, CSS found its way into JavaScript (CSS-in-JS).

约定并不是解决所有问题的方法，并且记住起来很复杂，因此在最近几年中，随着JavaScript在每个前端项目中的采用和构建过程的不断增加，CSS逐渐进入了JavaScript( CSS-in-JS )。

New tools explored new ways of doing CSS-in-JS and a few succeeded with increasing popularity:

新工具探索了CSS-in-JS的新实现方式，其中一些成功地获得了越来越多的成功：

React Style
React风格
jsxstyle
jsxstyle
Radium
镭

and more.

和更多。

引入样式化的组件 (Introducing Styled Components)

One of the most popular of these tools is Styled Components.

这些工具中最流行的一种是样式化组件 。

It is the meant to be a successor to CSS Modules, a way to write CSS that’s scoped to a single component, and not leak to any other element in the page.

它的目的是成为CSS模块的后继者，它是一种写CSS的方法，该CSS作用域仅限于单个组件，并且不会泄漏到页面中的任何其他元素。

(more on CSS modules here and here)

(更多关于CSS模块，在这里和这里 )

Styled Components allow you to write plain CSS in your components without worrying about class name collisions.

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

安装 (Installation)

Install styled-components using npm or yarn:

使用npm或yarn安装样式组件：

npm install styled-components
yarn add styled-components

That’s it! Now all you have to do is to add this import:

而已！现在，您要做的就是添加此导入：

import styled from 'styled-components'

您的第一个样式化的组件 (Your first styled component)

With the styled object imported, you can now start creating Styled Components. Here’s the first one:

导入styled对象后，您现在可以开始创建样式组件。这是第一个：

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

Button is now a React Component in all its greatness.

现在， Button 发挥了极大的作用。

We created it using a function of the styled object, called button in this case, and passing some CSS properties in a template literal.

我们使用样式对象的功能(在本例中为button并在模板常量中传递一些CSS属性来创建它。

Now this component can be rendered in our container using the normal React syntax:

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

render(<Button />)

Styled Components offer other functions you can use to create other components, not only button, like section, h1, input and many others.

样式化组件提供了可用于创建其他组件的其他功能，不仅包括button ，例如section ， h1 ， input ，还有许多其他功能。

The syntax used, with the backtick, might be weird at first, but it’s called Tagged Templates, it’s plain JavaScript and it’s a way to pass an argument to the function.

带有反引号的语法起初可能很奇怪，但是它被称为Tagged Templates ，它是纯JavaScript，是将参数传递给函数的一种方式。

使用道具自定义组件 (Using props to customize components)

When you pass some props to a Styled Component, it will pass them down to the DOM node mounted.

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

For example here’s how we pass the placeholder and type props to an input component:

例如，以下是我们如何通过placeholder和type道具的input组件：

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

render(
  <div>
    <Input placeholder="..." type="text" />
  </div>
)

This will do what you think, inserting those props as HTML attributes.

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

Props instead of being blindly passed down to the DOM can also be used to customize a component based on the prop value. Here’s an example:

道具不仅可以盲目地传递给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>
)

Setting the primary prop changes the color of the button.

设置primary道具会更改按钮的颜色。

扩展现有的样式化组件 (Extending an existing Styled Component)

If you have one component and you want to create a similar one, styled slightly differently, you can use extend:

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

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

const WhiteButton = Button.extend`
  color: white;
`

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

这是普通CSS (It’s Regular CSS)

In Styled Components, you can use the CSS you already know and love. It’s plain CSS. It is not pseudo CSS nor inline CSS with its limitations.

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

You can use media queries, nesting and anything else you might need.

您可以使用媒体查询，嵌套以及您可能需要的其他任何方式。

Here’s an example of a media query:

这是媒体查询的示例：

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

使用供应商前缀 (Using Vendor Prefixes)

Styled Components automatically add all the vendor prefixes needed, so you don’t need to worry about this problem.

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

结论 (Conclusion)

That’s it for this Styled Components introduction! These concepts will help you get an understanding of the concept and help you get up and running with this way of using CSS in JavaScript.

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