styled components

组件年龄的视觉原始图。使用ES6和CSS的最佳位置来对您的应用进行造型而不会压力吗？

---

从V5升级？请参阅《迁移指南》。

使用标记的模板文字（最近对JavaScript的添加）和CSS的功能， styled-components使您可以编写实际的CSS代码来样式组件。它还删除了组件和样式之间的映射 - 将组件用作低级样式结构并不容易！

 const Button = styled . button `
  color: grey;
` ;

另外，您可以使用样式对象。这允许从内联样式轻松移植CSS，同时仍支持更高级的样式组件功能（例如组件选择器和媒体查询）。

 const Button = styled . button ( {
  color : 'grey' ,
} ) ;

等效于：

 const Button = styled . button `
  color: grey;
` ;

styled-components与React（用于Web）和React Native都兼容 - 这意味着即使对于真正的通用应用程序，它也是理想的选择！有关更多信息，请参见有关React Native的文档。

由前端中心支持。感谢您使这一切成为可能！

---

文档

有关使用styled-components的更多信息，请参见stypled-components.com/docs上的文档！

快速链接到一些最访问的页面：

• 入门
• API参考
• 主题
• 服务器端渲染
• 标记的模板文字解释了

---

例子

 import React from 'react' ;

import styled from 'styled-components' ;

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled . h1 `
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
` ;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled . section `
  padding: 4em;
  background: papayawhip;
` ;

function MyUI ( ) {
  return (
    // Use them like any other React component – except they're styled!
    < Wrapper >
      < Title > Hello World, this is my first styled component! < / Title >
    < / Wrapper >
  ) ;
}

这就是您在浏览器中看到的内容：

---

寻找v5？

main分支是目前V6最流动版的样式组件。对于针对V5的更改，请将您的PR指向legacy-v5分支。

---

由styled-components建造

社区图书馆，项目和指南进行了许多艰苦的工作。其中许多使入门或帮助您进行下一个项目变得更加容易！人们还使用样式组件构建了许多有趣的应用程序和网站。

确保前往令人敬畏的组件，看看所有！并且请贡献并将自己的作品添加到列表中，以便其他人可以找到它。

---

贡献

如果您想为styled-components做出贡献，请参阅我们的贡献和社区指南，它们将帮助您在本地设置并解释整个过程。

另请注意， styled-components组织下的所有存储库都遵循我们的行为准则，请确保审查并遵循它。

---

徽章

让大家知道您正在使用样式组件→

 [ ![ style: styled-components ] ( https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e )] ( https://github.com/styled-components/styled-components ) 

---

贡献者

由于所有贡献的人，该项目的存在。 [贡献]。

---

支持者

感谢我们所有的支持者！ [成为支持者]

---

赞助商

通过成为赞助商来支持这个项目。您的徽标将在此处显示您网站的链接。 [成为赞助商]

---

执照

根据MIT许可，版权所有©2016-Present Glen Maddern和Maximilian Stoiber。

有关更多信息，请参见许可证。

---

致谢

这个项目以全球聪明人的早期作品为基础。我们要感谢Charlie Somerville，Nik Graf，Sunil Pai，Michael Chan，Andrey Popp，Jed Watson＆Andrey Sitnik，他们贡献了想法，代码或灵感。

特别感谢@okonet提供的出色徽标。