样式化的组件：to入门基础

通过照片 你好，我叫聂🇬🇧 上 Unsplash

样式化组件很棒，并且是React的完美搭配。 他们真的是。 而且它们也很容易理解...真的。 在本文中，我将分三部分介绍开始（以及以后开始）所需的所有知识。 非技术性且易于解释。 如果您了解这三件事，您将足够了解如何在项目中使用样式化组件。

三件事是：

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

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

3.如何创建全局样式。

我现在将一一讲解。

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

我将直接深入其中。 首先，您必须在项目中安装样式化组件。 输入以下命令：

npm i styled-components

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

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;

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

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

import styled from "styled-components" ;

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

如果要设置按钮的样式，则只需键入styled.button即可 。
或者，如果它是一个h2标签，则可以键入styled.h2 …您明白了！

这些属性包含可以使用带标记的模板文字进行调用的函数。 这意味着我们可以通过使用反勾号将数据发送到此函数中，然后将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
` ;

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

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

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

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

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

关于创建一个标准的样式化组件的另一件事是嵌套部分。 样式化组件具有嵌套样式的能力，就像您在SASS中所做的一样。 您可以在上面的代码中看到我嵌套了h2和button元素的样式。 在很多方面都很棒！ 它将使您的代码更加结构化和整洁。 您可以轻松查看哪些样式属于哪个组件。 您还将样式仅隔离到该组件，这意味着应用程序中的其他h2和button元素将不受影响。

因此，在有意义时，请使用嵌套为元素设置样式。 虽然并不总是那么有意义。 您不必为每个小元素都创建一个全新的样式化组件。 那样的话，嵌套就派上用场了。

那是一个...两个。

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

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

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

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

如果我们有一个称为正确设置为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>
);

这将给我们以下结果：

首先，看一下Login组件。 和StyledInput组件。 我创建了一个正确的道具，并将true和false传递给两个不同的组件。 获得真实值的那个将以红色显示。
要在样式化组件CSS中访问此prop值，可以使用以下代码：

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

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

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

两下……一去。

3.如何创建全局样式。

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

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

import { createGlobalStyle } from 'styled-components' ;

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

import { createGlobalStyle } from 'styled-components' ;

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

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

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

结论

就是这个！ 样式化组件的功能远不止于此，但我认为这确实是使用样式化组件需要了解的要点。 如果您有兴趣了解更多信息，我强烈建议您访问网站https://www.styled-components.com/docs/并在那里阅读文档。

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

我也有一个YouTube频道在教授免费课程，请在此处查看

From: https://hackernoon.com/styled-components-essentials-to-get-you-started-g117t3fqr