react: styled-components实现原理 标签模版

• styled-components是针对react中一个前端广泛使用的css-in-js样式库
• B站

利用标签模版

1. 利用ES6中的 标签模版文档
2. 标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

具体原理

• 链式调用

const Title = styled h1`
font-size: 1.5em;
text-align: center;
color: #0F$4F74;
`;

1. styled 是一个函数 它会返回一个对象(链式调用)
2. h1 是1返回的对象的里面的一个函数.返回的还是1.返回的对象