Question

我刚刚开始使用样式组件，看到他们称之为我认为是这样的函数：

import styled from "styled-components"

const Button = sytled.button` <--- this 
    // css goes here
`

我以前从来没有看过那种语法，想知道是否有人可以指点我的实际内容。

Answer 1

这就是为<button>元素设置CSS规则的方法。

那么你可以这样使用它：

<Button>Hello world</Button>

以上您编写的所有样式都将应用于所有<Button>元素

Answer 2

Styled-components是一个用于样式化反应组件的库。

import styled from "styled-components"

const Button = sytled.button` <--- this 
  // css goes here
 `;

 `` <-- these are template literals which was introduced in ES6.

样式是一个对象在这里，当你说styled.button时，它意味着我们正在设计html标签。所以你可以设置div，容器，h1等样式。你想使用标准的css来设置这些html标签的样式，样式组件为它们创建一个随机的类名。

假设你想要设计一个div。你把它命名为Wrapper。命名公约是第一封信总是资本。

const Wrapper = styled.div`
   background: #c0c0aa;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #1cefff, #c0c0aa);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #1cefff, #c0c0aa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   height: 100%;
   width: 100%;
 `;

现在你可以将你的内容包装在react的render（）中。

 <Wrapper>
  //Your code in render of react class goes here
  //thus instead of <div className = 'Wrapper'>
  //you use the above code
  //styled-components automatically generates random classnames solving major problems

 </ Wrapper>

欲了解更多信息，请参阅Max Stoiber在React Amsterdam的主题演讲。 https://www.styled-components.com/docs/basics#motivation

Answer 3

它称为标记模板文字。 “标签”是它之前的功能，该功能使用预处理的模板作为参数来调用。参数如下：

在<input value={this.state.hero_Cellphone} onChange={this.hero_Cellphone} type="tel" placeholder="Cellphone" name="hero_Cellphone" maxLength="10" /> <br /> <input value={this.state.hero_Email} onChange={this.hero_Email} type="email" name="email" id="email1" placeholder="Email ID" /> <br /> <button type="button" onClick={this.footer_submitForm} name="submit">SEND</button>之间具有所有字符串部分的数组。
模板的前${variables}。
模板的第二${variable}。
等...

例如，我重新创建了用于处理模板文字的默认函数：

${variable}

以这种方式调用

function tag(stringParts, ...values){
  return stringParts.reduce((accum, part, index) => accum + values[index-1] + part);
}

产生与

相同的结果

tag`Hello, ${name}! I found ${count} results.`

，馈给标签函数的参数将为`Hello, ${name}! I found ${count} results.`，['Hello, ', '! I found ', ' results.']和name。

样式组件中的这种语法实际上意味着什么？

3 个答案: