styled components下載 - styled components源代碼下載

styled components

其他源碼

v6.1.13

下載

組件年齡的視覺原始圖。使用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 )