样式组件语法究竟是如何工作的

Question

我在查看样式组件时看到了以下语法：

const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;

我不明白幕后发生了什么，也不明白styled对象实际应用了什么属性。有人能向我解释这个代码是如何运行的吗？

Answer 1

阅读标签模板

这基本上是一个函数，但您可以在没有()的情况下运行它

const styled = data => {
return data + ' JavaScript';
};
const data = styled `I love`;
console.log(data);

具有内置功能的示例：

console.log('a b c'.split ` `)
console.log(Object.entries `abc`)
console.log([1, 2, 3].concat `abc`)

Answer 2

您创建样式化的h1元素，例如在Header组件中：

const Title = styled.h1`
font-size: 2rem;
text-align: center;
color: blue;
`;

您可以像使用<h1>标签一样使用它，但使用自定义名称：

<Title>My portfolio</Title>

您最终得到了静态散列类名sc-<hashedStringName>，其中一个是动态类：

<h1 class="sc-gsnERi fiwDZi">My portfolio</h1>

如此风格的组件：

• 生成静态类名
• 生成动态类名

Answer 3

这基本上允许您在JSX中创建自定义标记。还可以将道具传递给已设置样式的零部件中的样式特性。

如果你有这个jsx:

<Title>This is Custom H1</Title>
const Title = styled.h1`
color: red;
`

它将呈现如下HTML：

<h1 class="someRandomAlphabet">This is Custom H1</h1>

其中h1标签的类将具有以下属性：

.someRandomAlphabet{
color: red;
}