样式组件化_样式化的组件：3个步骤介绍了基础知识

样式组件化

Cover Photo by Hello I’m Nik 🇬🇧 on Unsplash

封面照片： Hello I'm Nik🇬🇧在“ Unsplash”上

I love React and Styled Components. It’s like building stuff with lego bricks into something bigger and whole.

我喜欢React和Styled Components。 这就像用乐高积木建造东西一样大。

Styled Components are awesome and a perfect match for React. They really are. And they’re also easy to understand…really.

样式化组件很棒，并且是React的完美搭配。 他们真的是。 而且它们也很容易理解...真的。

In this article I will break down everything you need to know to get started (and beyond started) in three parts. Not deeply technical, and simply explained. If you know these three things, you know enough to use Styled Components in your project without hassle.

在本文中，我将分三部分介绍开始(以及以后开始)所需的所有知识。 不深入的技术，并简单解释。 如果您了解这三件事，那么您就足够了解在项目中使用样式化组件的麻烦了。

The three things are:

三件事是：

1. How to create and use a Styled Component.

   如何创建和使用样式化组件。

2. How to modify your CSS conditionally with props

   如何使用道具有条件地修改CSS

3. How to create Global Styling.

   如何创建全局样式。

I’ll go through them one by one now.

我现在将一一讲解。

1.如何创建和使用样式化组件 (1. How to create and use a Styled Component)

I’ll dive right into it. First you have to install Styled Components in your project. Do it by typing:

我将直接深入其中。 首先，您必须在项目中安装样式化组件。 通过键入以下内容：

npm i styled-components

Now you’re good to go. You can use Styled Components in your projects. Below is some code that I’ll explain below. Have a good look at it and continue reading below the code.

现在您可以开始了。 您可以在项目中使用样式化组件。 下面是一些代码，我将在下面解释。 仔细看一下，然后继续阅读下面的代码。

import React from "react";
import styled from "styled-components";

const StyledLogin = styled.div`
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 2px solid #000;
  border-radius: 20px;
  background: #eee;

  h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
  }

  button {
    background: green;
    color: #fff;
    padding: 10px;
    margin: 5px;
    width: 150px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
  }
`;

const StyledInput = styled.input`
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  width: 150px;
  box-sizing: border-box;
`;

const Login = () => (
  <StyledLogin>
    <h2>Login</h2>
    <StyledInput type="text" placeholder="email" />
    <StyledInput type="password" placeholder="password" />
    <button>Login</button>
  </StyledLogin>
);

export default Login;

The above code will create a component called Login that looks like this:

上面的代码将创建一个名为Login的组件，如下所示：

Nothing fancy, nothing special. Just a Login component to help us understand Styled Components better. Ok - the first thing you’ll notice in the above code is that we have to somehow tell React that we want to use Styled Components. We do this by importing it like so:

没什么花哨的，没什么特别的。 只是一个登录组件，可以帮助我们更好地理解样式化组件。 好的-在上面的代码中您会注意到的第一件事是，我们必须以某种方式告诉React我们要使用样式化组件。 我们通过这样导入来做到这一点：

import styled from “styled-components”;

Now we have imported an object called styled that we can use to style our components. This object has different properties that you can use depending on what you want to style. If it is a div, like in our example, you just simply access the div property on the styled object. Like so: styled.div

现在，我们导入了一个名为styled的对象，可用于对组件进行样式设置。 该对象具有不同的属性，您可以根据要设置的样式使用它们。 如果它是一个div，例如在我们的示例中，您只需访问styled对象上的div属性。 像这样： styled.div

If you want to style a button you can simply type styled.button instead.Or if it was an h2 tag you can type styled.h2 …you get the point!

如果您想为按钮设置样式，则只需键入styled.button即可； styled.button如果它是h2标签，则可以键入styled.h2 ……您明白了！

These properties are holding functions that you can call with tagged template literals. Meaning that we can send in the data to these functions by using back-ticks and then put our CSS between these back-ticks (``). You also create a const to hold the Styled Component. So if we want to create a Styled Component for our Login component we just write the below code:

这些属性包含可以使用带标记的模板文字进行调用的函数。 这意味着我们可以使用反引号将数据发送到这些函数中，然后将CSS放在这些反引号之间( `` )。 您还创建一个const来保存样式化组件。 因此，如果我们想为我们的Login组件创建一个Styled Component，我们只需编写以下代码：

const StyledLogin = styled.div`
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 200px;
  height: 200px;
  // And more CSS code below
`;

In short, to create styling for a div element with Styled Components you just use this syntax:

简而言之，要使用样式化组件为div元素创建样式，只需使用以下语法：

const SomeName = styled.div` CSS code goes here … `;

Then you can just use it as a regular component:

然后，您可以将其用作常规组件：

<SomeName> Your other code here … </SomeName>

You can create as many of these Styled Components as you need. In the above example I’ve created two Styled Components, one that’s called StyledLogin and one that’s called StyledInput.

您可以根据需要创建许多这样的样式化组件。 在上面的示例中，我创建了两个样式化组件，一个称为StyledLogin 还有一个叫做 StyledInput 。

One more thing about creating a standard Styled Component that’s good to know is the nesting part. Styled Components have the ability to nest styling just like you can do in, for example, SASS.

创建标准的样式化组件的另一件事是嵌套部分。 样式化组件具有嵌套样式的能力，就像您在SASS中所做的一样。

You can see in the above code that I have nested my styling for the h2 and the button elements. This is great in so many ways! It will make your code a lot more structural and clean. You can easily see what styling belongs to what component. You are also isolating the styling to only that component, meaning that other h2 and button elements in your App won’t be affected.

您可以在上面的代码中看到，我为h2和button元素嵌套了样式。 在很多方面都很棒！ 它将使您的代码更加结构化和整洁。 您可以轻松查看哪些样式属于哪个组件。 您还将样式仅隔离到该组件，这意味着您的应用程序中的其他h2和button元素将不受影响。

So, when it makes sense, use nesting to style elements. It doesn’t always make sense, though. You don’t have to create a completely new Styled Component for every little element. That’s when nesting like this come in handy instead.

因此，在有意义时，请使用嵌套为元素设置样式。 但是，这并不总是很有意义。 您不必为每个小元素都创建一个全新的样式化组件。 那样的话，嵌套很方便。

That’s one - two to go.

那是一到两个。

2.如何使用道具有条件地修改CSS。 (2. How to modify your CSS conditionally with props.)

Styled components can receive props. Just like a regular Component. By passing in props to your Styled Component you can do some conditional CSS styling. Smooooooth … 🏄‍♂️

样式化的组件可以接收道具。 就像常规组件一样。 通过将props传递给您的样式化组件，您可以进行一些条件CSS样式化。 Smooooooth…🏄‍♂️

Let’s say we want to change the color of the password input field depending on if the user typed in the wrong password or not.

假设我们要根据用户是否输入了错误的密码来更改密码输入字段的颜色。

Ok, I realize that this is a really simplified solution and there would be much more than a simple prop involved in stuff like this. But for the sake of this tutorial article, let’s say that we do it like this.

好的，我意识到这是一个真正简化的解决方案，并且像这样的事情所涉及的不仅仅是简单的道具。 但是，为了本教程文章的缘故，我们可以这样说。

If we have a prop that’s called correct set to false, we make our textbox red instead. Let’s have a look at the below code. I’ve intentionally left out the styling code for the whole Login component to save space. So let’s pretend that that’s there and is the same as above.

如果我们有一个叫做correct的道具 设置为false，我们将文本框改为红色。 让我们看一下下面的代码。 我故意将整个Login组件的样式代码省去了，以节省空间。 因此，让我们假设它在那里并且与上面相同。

const StyledInput = styled.input`
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  width: 150px;
  box-sizing: border-box;
  background: ${prop => prop.correct ? 'white' : 'red'};
`;

const Login = () => (
  <StyledLogin>
    <h2>Login</h2>
    <StyledInput correct={true} type="text" placeholder="email" />
    <StyledInput correct={false} type="password" placeholder="password" />
    <button>Login</button>
  </StyledLogin>
);

This will give us this result:

这将给我们以下结果：

First, take a look at the Login component. And the StyledInput components. I’ve created a prop that's called correct and I'm passing in true and false to the two different components. The one that gets the true value will be shown in white.To access this prop value in your Styled Component CSS you can use the below code:

首先，看看 Login组件。 和StyledInput组件。 我创建了一个称为correct的道具，并传递了true 对两个不同的组成部分都为false 。 获得真实值的将以白色显示。要在样式化组件CSS中访问此prop值，可以使用以下代码：

background: ${prop => prop.correct ? ‘white’ : ‘red’};

You just simply create a ternary operator inside an arrow function surrounded by ${} telling this Styled Component to select the white color if prop.correct is false. And use the red color if prop.correct is true. Simple as that!

您只需在${}包围的箭头函数内部创建一个三元运算符，告诉该Styled Component如果prop.correct为false则选择白色。 如果prop.correct为true则使用红色。 就那么简单！

You can do this with any CSS property you want! ✌️And that’s how you do conditional CSS with props in Styled Components.

您可以使用任何所需CSS属性来执行此操作！ ✌️这就是您使用样式化组件中的props进行条件CSS的方式。

Two down - one to go.

两倒 - 一去。

3.如何创建全局样式。 (3. How to create Global Styling.)

The last essential thing you need to know to use Styled Components is how to create global styling.

使用样式化组件需要了解的最后一项基本知识是如何创建全局样式。

Global styling is achieved by using a special function for this purpose from the Styled Components library. It’s called createGlobalStyle and you import it like this:

为此，可以使用样式化组件库中的特殊功能来实现全局样式化。 叫做createGlobalStyle 然后像这样导入它：

import { createGlobalStyle } from ‘styled-components’;

Then you can create a Global Styled Component like this:

然后，您可以像这样创建一个全局样式的组件：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background: #000;
    color: #fff;
  }
`;

const App = () => {
  <>
    <GlobalStyle />
    <Login />
  </>
}

You just place the global style component at the top level of your application. Then, it will use the style throughout your App. In this case, I assume that the top-level Component is named App. You can also use props and do some conditional CSS in global Styled Components. Just like the regular Styled Components.

您只需将全局样式组件放在应用程序的顶层。 然后，它将在整个App中使用样式。 在这种情况下，我假设顶级组件名为App 。 您还可以使用props并在全局样式化组件中执行一些条件CSS。 就像常规的样式化组件一样。

结论 (Conclusion)

That is it! There’s more to Styled Components than this, but I think that these really are the essentials that you need to know for using Styled Components.

这就对了！ 样式化组件的功能远不止于此，但我认为这些确实是使用样式化组件需要了解的要点。

If you’re interested in learning more I highly recommend that you go to the website https://www.styled-components.com/docs/ and read the docs there.

如果您有兴趣了解更多信息，我强烈建议您访问网站https://www.styled-components.com/docs/并在那里阅读文档。

Also, thank you for reading this post. I’m a Developer from Sweden that loves to teach and code. I also create courses on React and Gatsby online. You can find me on Udemy. Just search for Thomas Weibenfalk or hook me up on Twitter @weibenfalk

另外，感谢您阅读这篇文章。 我是一位来自瑞典的开发人员，喜欢教书和编码。 我还在线创建关于React和Gatsby的课程。 您可以在Udemy上找到我。 只需搜索Thomas Weibenfalk或在Twitter @weibenfalk上吸引我

I also have a Youtube channel were I teach free stuff, check it out here.

我也有一个YouTube频道供我免费教书，请在此处查看 。

翻译自: https://www.freecodecamp.org/news/styled-components-essentials-in-three-steps/

样式组件化