🔥styled-components 的原理你知道吗？随着这些年前端技术的发展，陆陆续续涌现出很多优秀的技术，尤其是在

随着这些年前端技术的发展，陆陆续续涌现出很多优秀的技术，尤其是在CSS领域有各种不断的尝试，例如：CSS In JS 在这个领域中涌现出许许多多优秀的库，例如：styled-components，Emotion，Radium，styled-jsx ..... 这些优秀的技术库都在这个领域中不断的尝试，对于他们的优秀思想我觉得作为一个有上进心的程序员是一定要了解学习的。

我们今天就来学习 styled-components 这个优秀CSS库的原理。其实这个原理也非常简单主要使用 ES6 的标签模板，如果你不是很清楚我建议你先通读这篇文章再来看下面的原理。

基础样式组件

// 基础的样式组件

const BasisDiv = styled.basisDiv`
  color: pink;
`;

function App() {
  return (
    <div>
      <BasisDiv>基础的样式</BasisDiv>
    </div>
  );
}

点击这里查看完整的在线demo

在这里思路其实很简单，首先一个是使用标签模板，在我们拿到样式字符串之后，对它进行去除首尾空格和多余的换行，之后以“;”进行切割为数组再去除多余的空字符串，然后在经过map转换成键值对的二维数组，之后再将其转换为样式对象，赋值给div元素。这样就完成了这个简单的样式组件。

在这里我们已经实现了一个最简单的styled-components, 但是这个组件还有很多缺点，比如我想给这个组件添加点击事件，或者想传递一个props怎么办？

支持Props样式组件

在React开发中组件支持props是必不可少的，那我们现在就来看看怎么添加props和事件！

const PropsDiv = styled.propsDiv`
    background-color: pink;
`;
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <PropsDiv
        name="支持Props样式组件"
        onClick={() => {
          console.log("点击事件");
          setCount((oldCount) => oldCount + 1);
        }}
      >
        支持传递props-- {count}
      </PropsDiv>
    </div>
  );
}

点击这里查看完整的在线demo

支持这个能力其实真的很简单，我们只需要运用解构赋值将剩余的参数收集起来，在div元素上展开就完成了这个功能。

我们使用完整的styled-components就会发现，如果我们想使用props控制样式组件的样式的话，目前的代码是不支持的，那我们应该怎么实现呢？

支持样式的改动

const FuncDiv = styled.funcDiv`
  color: red;
  background-color: ${({ backColor }) => backColor};
`;

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <FuncDiv
        backColor="pink"
        onClick={() => {
          console.log("点击事件2");
        }}
      >
        样式支持函数
      </FuncDiv>
    </div>
  );
}

点击这里查看完整的在线demo

对于这个功能我们重写了 propsDiv 这个方法，我们添加了 funArr 这个数组，它主要存储我们在模板字符串中书写的函数，我们还需要将props传递给 advancedParsingStyle 方法。在这个方法中我们需要将字符串和调用函数之后返回的字符串拼接在一起，然后在做转换操作。

在这个 funcDiv 方法中我们考虑了这个div元素只需要接收事件，所以我们将props进行了剔除操作，只需要将事件传递给div元素即可，至于其他的props均为控制样式的props，以供函数调用使用。

总结

以上就是styled-components的基本原理，主要是使用了标签模板这个知识点。在本片文章中我们只介绍了基本的原理，至于 继承，生成样式类名，编译等 原理，你要是感兴趣的话可以阅读styled-components源码，自己学习。

另外附上本片文章的源码-TS

🔥styled-components 的原理你知道吗？

基础样式组件

支持Props样式组件

支持样式的改动

总结

往期精彩