解读风格化组件

Joshua Comeau通过重新构建基础知识来挖掘风格化组件的 工作原理。这是一个有趣而有用的旅程。

styled-components似乎是CSS-in-React市场的最大玩家。尽管身处那个世界，我还没有完全被它所蛊惑。我是一个基础知识的忠实粉丝：通过独特的类名来界定样式的范围。我也喜欢它与热模块重载一起工作，因为这一切都发生在JavaScript中。但我通过css模块得到这些，而且我喜欢通过css模块得到的文件分隔和Sass支持。不过有几件事我已经开始想通了（有点）。

• 即使有了css模块，你仍然需要考虑名字的问题。即使它只是像.root 或其他什么。使用风格化组件，你可以将风格直接附加到组件上，而不需要真正地命名任何东西。
• 使用css模块，你只是将样式直接应用于一个HTML元素。使用styled-components，你可以将样式应用于自定义组件，它将通过传播道具的方式将样式添加到组件上。
• 因为样式是在JavaScript文件中，你可以得到你可以使用的JavaScript东西--三元组、道具访问、花式数学等等。

直接链接到文章-Permalink

The postDemystifying styled-componentsappeared first onCSS-Tricks.你可以通过成为MVP支持者来支持CSS-Tricks。