在自己的项目中使用styled-component

前言

今天还是围绕react中的css解决方案写的一篇文章，根据神三元大佬的掘金小册，我尝试在自己的项目中使用styled-component，第一次接触大佬的编程思路，总体下来感觉收获良多，再次与大家分享。

styled-component

首先我们要知道啥是styled-component，首先可以说这是目前最受欢迎的JSS解决方案，首先我们要明确的一点就是这个东西的学习成本虽然不是所谓的零成本，但是总体来说并不高：

yarn add styled-component

我们从一个简单的例子看起：

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const Home = () => {
   
  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
  </Wrapper>
  )
}

从上面的例子可以简单的看出这个库的一个很好的地方，那就是语义化的标签。

而这时如果我们打开控制台来看这段代码：

<section class="sc-fzXfMx">
  <h1 class="sc-fzXfMw">Hello World!</h1>
</section