样式化的组件-通过实践掌握基础知识

简报
读者注意
工作区和HTML
JavaScript，React.js和样式化组件
带来更多模块化
扩展样式组件
自适应样式组件和使用道具
关于样式化组件的总结思想

样式化组件变得越来越流行。使用React.js构建的许多项目都使用此库。这不足为奇。样式化组件使使用CSS变得轻松而有趣，即使在JavaScript中也是如此。但是，一切都需要实践，尤其是当您想要精通时。这是本文的目标。让我们回到样式化组件的基础知识和实践。

简报

通常，让我们从简短的介绍开始，并为当今的实践设定一些目标。那么，我们将要做什么？本文将全部讨论如何使用样式化组件。我们将使用该库创建许多示例。并且，为了使操作更简单，我们将从简单的示例开始。然后，我们将逐渐变得更加困难。

本文或教程不需要任何有关样式组件或React.js的知识。我将尝试解释那些可能会给您带来麻烦的部分。因此，即使您对样式化组件或React.js一无所知，您也可以遵循它。话虽如此，如果您有一定的知识，那么您将更容易理解代码，代码的工作方式以及原因。

如果您想了解有关样式化组件的更多信息，则绝对应该看一下两种资源。第一个是样式组件的网站和文档。第二个是对该博客上发布的样式化组件的介绍。在了解了使用样式化组件的感觉之后，您可以现在看看，也可以稍后再查看。

读者注意

我还要说一件事。如果您不喜欢将CSS代码与JavaScript混合的想法，请在React组件内部，不要离开。给样式化组件一个机会。我知道你的感受。我在同一条船上。我非常不喜欢这个主意。但是，我在一些示例中尝试了样式化组件，然后在几个项目中进行了尝试。而且，这种经历改变了我的想法。

样式化组件的入门非常容易，使用它自然而然，就像使用普通CSS，Sass或PostCSS一样。我不得不说，样式化组件从字面上将我的代码的模块化提升到了一个新的水平。这听起来似乎很简单，但是将组件，CSS和JavaScript / React.js的所有代码都放在一个地方就更清楚了，并且可以更快地工作。

因此，请看一下我们今天将要处理的示例。播放并尝试代码。查看文档和样式化组件介绍。无论您是否喜欢这种方法，都可以自己看看。您可能会改变主意。也许。如果没有，最糟糕的事情是什么？您将学到一些新知识，然后返回自己喜欢的方法。

工作区和HTML

好吧，足够多的谈话，让我们开始工作。首先，我们需要设置工作区。除此之外，对于样式化组件，我们将需要使用两个额外的库。我们将使用CDN来获取它们以及样式化组件的库。这些库是React.js和React-DOM。我们将使用CDN来获得两者。让我们也使用babel transpiler。这将使使用React.js更加容易。

我们需要的第二件事是准备HTML文档，在此我们将呈现React.js组件。因为我们其余的代码都在JavaScript / React.js中，所以这将是快速而简单的。我们需要的只是一个div元素。正如我所说，我们将使用此元素作为“占位符”来呈现我们的React组件。让我们给它一个类“容器”。而且，对于HTML就是这样。

码：

JavaScript，React.js和样式化组件

现在，当一切准备就绪时，我们终于可以开始使用样式化组件了。正如我在开始时提到的，我们将从基本内容开始。好吧，对于样式化组件或CSS而言，实际上没有什么真正困难的。无论如何，让我们从基础开始，并使用font-weight和font-size为标题和正文创建一些字体样式。

码：

 // Import React.js and styled-components 
 import React from 'react' 
 import styled from 'styled-components'

 const container = document.querySelector('.container')

 // Define typography styles 
 const H1 = styled.h1` 
 font-size: 54px; 
 font-weight: bold; 
 `

 const H2 = styled.h2` 
 font-size: 36px; 
 font-weight: bold; 
 `

 const H3 = styled.h3` 
 font-size: 24px; 
 font-weight: bold; 
 `

 const H4 = styled.h4` 
 font-size: 16px; 
 font-weight: bold; 
 `

 const H5 = styled.h5` 
 font-size: 14px; 
 font-weight: bold; 
 `

 const H6 = styled.h6` 
 font-size: 12px; 
 font-weight: bold; 
 `

 const Text = styled.p` 
 font-size: 16px; 
 `

 const Small = styled.small` 
 font-size: 80%; 
 `

 // Use our styles 
 const WrapperContainer = () => ( 
  
 Heading h1

  Heading h2

  Heading h3

  Heading h4

  Heading h5

  Heading h6

  Body text

  Small text

 ReactDOM.render( 
 , 
 container 
 )

带来更多模块化

如您在上面的示例中所见，使用样式化组件就像使用普通CSS。您可能需要一些时间来记住另一种定义样式的方式，例如在我们的示例中使用const 。但是，它离火箭科学还很远。现在，回到我们的示例。你有注意到吗？是的，我们多次使用相同的字体粗细 。

当我们的代码很短时（例如在这种情况下），这不是问题。但是，我们可以用更好，更模块化的方式编写代码。如果我们定义一个新的const ，将其font-weight设置为“ bold”，然后在每种标题样式中使用该变量，该怎么办？然后，如果发生某些情况，我们将决定更改该font-weight ，我们只需要在一个位置上进行更改。

这项更改将轻松快捷。但是，我们将需要从样式组件库中导入另一种方法。此方法已定义，并从样式组件库导出为css 。让我们使用样式化组件导入来更改第二行，并包括css方法。请记住，“ css”是用小写字母写的。接下来，我们可以使用粗体样式定义可重用的const 。

之后，我们可以随时随地使用此新const 。我们要做的就是使用${}语法，在大括号之间使用特定const的名称。

码：

 // Import React.js, styled-components and css 
 import React from 'react' 
 import styled, { css } from 'styled-components'

 const container = document.querySelector('.container')

 // Define new const with bold style 
 const headingStyle = css` 
 font-weight: bold; 
 `

 // Define typography styles 
 const H1 = styled.h1` 
 font-size: 54px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 const H2 = styled.h2` 
 font-size: 36px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 const H3 = styled.h3` 
 font-size: 24px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 const H4 = styled.h4` 
 font-size: 16px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 const H5 = styled.h5` 
 font-size: 14px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 const H6 = styled.h6` 
 font-size: 12px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 const Text = styled.p` 
 font-size: 16px; 
 `

 const Small = styled.small` 
 font-size: 80%; 
 `

 // Use our styles 
 const WrapperContainer = () => ( 
  
 Heading h1

  Heading h2

  Heading h3

  Heading h4

  Heading h5

  Heading h6

  Body text

  Small text

 ReactDOM.render( 
 , 
 container 
 )

我们需要牢记一件事。如果我们在另一个文件中定义该const ，并且希望在其他位置使用它，则需要从原始文件中导出它，然后将其导入到要使用的位置。

码：

 // File foo.js 
 // Import React.js, styled-components and css 
 import React from 'react' 
 import styled, { css } from 'styled-components'

 // Define and export new const with bold style 
 export const headingStyle = css` 
 font-weight: bold; 
 `

 // File bar.js 
 // Import React.js, styled-components and css 
 import React from 'react' 
 import styled, { css } from 'styled-components'

 // Import our const 
 import { headingStyle } from './styles/foo'

 const container = document.querySelector('.container')

 // Define typography styles 
 const H1 = styled.h1` 
 font-size: 54px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 // Use our styles 
 const WrapperContainer = () => ( 
  
 Heading h1
 
 
 
 )

 ReactDOM.render( 
 , 
 container 
 )

同样，重要的是要记住，我们必须像上面的示例一样导出我们想使用的所有const变量，然后将其导入到要使用的位置。就是说，如果我们只想从文件导出一个变量，函数，方法或类，则可以将其导出为“默认”。这样，导入时就不需要使用大括号（“ {}”）。

码：

 // File foo.js 
 // Import React.js, styled-components and css 
 import React from 'react' 
 import styled, { css } from 'styled-components'

 // Define new const with bold style 
 const headingStyle = css` 
 font-weight: bold; 
 `

 // Export our const as default 
 export default headingStyle

 // File bar.js 
 // Import React.js and styled-components 
 import React from 'react' 
 import styled from 'styled-components'

 // Import our const - without curly brackets 
 import headingStyle from './styles/foo'

 const container = document.querySelector('.container')

 // Define typography styles 
 const H1 = styled.h1` 
 font-size: 54px;

  // Using headingStyle const 
 ${headingStyle} 
 `

 // Use our styles 
 const WrapperContainer = () => ( 
  
 Heading h1
 
 
 
 )

 ReactDOM.render( 
 , 
 container 
 )

话虽如此，我们可以将默认导出与命名导出一起使用，以便我们可以导出多个变量，函数，方法或类。但是，我们需要记住对哪个变量，函数，方法或类使用了哪个导出。请记住，默认导出不需要大括号，而是需要大括号。

码：

 // File foo.js 
 // Import React.js, styled-components and css 
 import React from 'react' 
 import styled, { css } from 'styled-components'

 // Define and export some consts 
 const firstVariable = css` 
 font-size: 21px; 
 text-decoration: none; 
 `

 const secondVariable = css` 
 text-align: center; 
 color: #black; 
 `

 const thirdVariable = css` 
 padding: 4px; 
 border: 1px solid gray; 
 `

 // Export our first const as default ad the rest as named 
 export { firstVariable as default, secondVariable, thirdVariable }

 // File bar.js 
 // Import React.js and styled-components 
 import React from 'react' 
 import styled from 'styled-components'

 // Import our const - default without curly brackets, named with curly brackets 
 import firstVariable, { secondVariable, thirdVariable } from './styles/foo'

 // Or, we can import our const this way: 
 // default without curly brackets, named by using "*" 
 import firstVariable, * from './styles/foo'

导入和导出语句对您来说听起来很有趣吗？如果您想了解更多有关它们的信息，建议您查看MDN文档（用于导出和导入）。有许多示例可以帮助您理解这些语句的具体内容以及如何以正确的方式使用它们。我希望我做到了。

扩展样式组件

好的。现在，我们知道了如何使用样式化组件通过变量创建具有特定样式的新组件。如果我们想拥有一个具有特定样式的变量，并将其用于组件以及扩展其他组件的样式，就像我们对“ headingStyle”和“ H1”所做的那样，该怎么办？我们可以做到这一点，扩展组件，我的意思是从字面上看。我们可以使用extend 。

我们需要做的是为某个组件（例如按钮）定义一个新变量。然后，我们将添加一些样式以使此按钮看起来更好。此后，我们将创建另一个变量或另一个按钮，该变量将继承第一个样式，同时具有自己的样式。我们将使用const * = Button.extend而不是第一个按钮使用的const * = styled.*语法。

还有一件事，我们不必从styled-components库中导入任何其他方法，就像在css情况下那样。我们只需要导入样式化的组件并根据需要使用extend 。注意，我们正在导入默认导出，因为我们不必在大括号内包围“样式化”的导入。

码：

 // Import React.js and styled-components 
 import React from 'react' 
 import styled from 'styled-components'

 const container = document.querySelector('.container')

 const Button = styled.button` 
 padding: 12px 24px; 
 font-size: 16px; 
 color: #fff; 
 border: 0; 
 border-radius: 35px; 
 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 cursor: pointer; 
 `

 // Using extend to create a red variant of the button 
 const ButtonRed = Button.extend` 
 background-color: #e74c3c; 
 `

 // Using extend to create a green variant of the button 
 const ButtonGreen = Button.extend` 
 background-color: #2ecc71; 
 `

 // Use our styles 
 const WrapperContainer = () => (

  Red button

  Green button 
  
 )

 ReactDOM.render( 
 , 
 container 
 )

自适应样式组件和使用道具

到目前为止，我们通过变量创建了具有特定样式的新组件。然后，我们还练习了如何定义可重用变量以及如何使用extend 。问题在于前面示例中的代码仍然太长。我们可以使其更短，更简洁。为此，我们将使用props 。注意：我们将再次需要从样式组件库中导入“ css”。

接下来，我们可以使用道具来定义变量或组件的变体，而不必创建新的变体。我们可以通过使用${props => props.componentProp && css` some styles `}语法来做到这一点，其中“ componentProp”是我们将附加到默认组件变体的属性。

码：

 // Import React.js, styled-components and css 
 import React from 'react' 
 import styled, { css } from 'styled-components'

 const container = document.querySelector('.container')

 const Button = styled.button` 
 padding: 12px 24px; 
 font-size: 16px; 
 border: 0; 
 border-radius: 35px; 
 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 cursor: pointer;

  // Using props to create a gray variant of the button 
 ${props => props.gray && css` 
 background-color: #95a5a6; 
 `}

  // Using props to create a green variant of the button 
 ${props => props.green && css` 
 background-color: #2ecc71; 
 `}

  // Using props to create a red variant of the button 
 ${props => props.red && css` 
 background-color: #e74c3c; 
 `}

  // We can also use a ternary operator for "binary" changes 
 // if button has prop "gray", the color will be "#2c3e50" otherwise it will be "#fff" 
 color: ${props => props.gray ? '#2c3e50' : '#fff'}; 
 `

 const WrapperContainer = () => (

  {/* Button with prop "red" */}

  {/* Button with prop "green" */} 
  
  
 )

 ReactDOM.render( 
 , 
 container 
 )

关于样式化组件的总结思想

那么，样式化组件是否说服您改变了在JavaScript中混合CSS的想法？如果像我一样习惯使用香草CSS，Sass或PostCSS，这可能会很奇怪。如果您仍不完全相信，请花一点时间。然后，您可以以崭新的眼光和清晰的头脑看一下我们今天创建的示例。或者，回到您喜欢的位置。

我想说的最后一件事。今天，我们专注于样式化组件的基础。而且，也许太多了。结果，也许您发现本文太基础了。而且，你是对的。这是基本的，非常基本的。但是，必须掌握基础知识，然后才能继续操作和练习更高级的主题。