Styled-Components

forsigner 發布于2019-08-26 11:52 / 766人閱讀

摘要：它是通過改變編寫方式的解決方案之一，從根本上解決常規編寫的一些弊端。通過來為賦能，我們能達到常規所不好處理的邏輯復雜函數方法復用避免干擾。他搭配可能將模塊化走向一個更高的高度，樣式書寫將直接依附在上面，三者再次內聚。

Styled-Components

它是通過JavaScript改變CSS編寫方式的解決方案之一，從根本上解決常規CSS編寫的一些弊端。
通過JavaScript來為CSS賦能，我們能達到常規CSS所不好處理的邏輯復雜、函數方法、復用、避免干擾。
盡管像SASS、LESS這種預處理語言添加了很多用用的特性，但是他們依舊沒有對改變CSS的混亂有太大的幫助。因此組織工作交給了像 BEM這樣的方法，雖然比較有用，但是它完全是自選方案，不能被強制應用在語言或者工具層面。
他搭配React可能將模塊化走向一個更高的高度，樣式書寫將直接依附在JSX上面，HTML、CSS、JS三者再次內聚。

基本安裝

npm install --save styled-components

除了npm安裝使用模塊化加載包之外，也支持UMD格式直接加載腳本文件。

入門

styled-components使用標簽模板來對組件進行樣式化。

它移除了組件和樣式之間的映射。這意味著，當你定義你的樣式時，你實際上創造了一個正常的React組件，你的樣式也附在它上面。

這個例子創建了兩個簡單的組件，一個容器和一個標題，并附加了一些樣式。

// Create a Title component that"ll render an  tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that"ll render a  tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they"re styled!
render(
  
    
      Hello World, this is my first styled component!
    
  
);

注意
CSS規則會自動添加瀏覽器廠商前綴，我們不必考慮它。

透傳props

styled-components會透傳所有的props屬性。

// Create an Input component that"ll render an  tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with a placeholder of "@mxstbr", and one with a value of "@geelen"
render(
  
    
    
  
);

基于props做樣式判斷

模板標簽的函數插值能拿到樣式組件的props，可以據此調整我們的樣式規則。

const Button = styled.button`
  /* Adapt the colours based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  
    
    
  
);

樣式化任意組件

// This could be react-router"s Link for example
const Link = ({ className, children }) => (
  
    {children}
  
)

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  
    Unstyled, boring Link
    

    Styled, exciting Link
  
);

擴展樣式

我們有時候需要在我們的樣式組件上做一點擴展，添加一些額外的樣式：
需要注意的是.extend在對樣式組件有效，如果是其他的React組件，需要用styled樣式化一下。

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// We"re extending Button with some extra styles
const TomatoButton = Button.extend`
  color: tomato;
  border-color: tomato;
`;

render(
  
    
    Tomato Button
  
);

在極少特殊情況下，我們可能需要更改樣式組件的標簽類型。我們有一個特別的API，withComponent可以擴展樣式和替換標簽：

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// We"re replacing the 
    Normal Link
    Tomato Link

); 添加attr

我們可以使用attrsAPI來為樣式組件添加一些attr屬性，它們也可以通過標簽模板插值函數拿到props傳值。

const Input = styled.input.attrs({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  margin: props => props.size || "1em",
  padding: props => props.size || "1em"
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed props */
  margin: ${props => props.margin};
  padding: ${props => props.padding};
`;

render(
  
    
    

    
  
);

動畫

帶有@keyframes的CSS animations，一般來說會產生復用。styled-components暴露了一個keyframes的API，我們使用它產生一個可以復用的變量。這樣，我們在書寫css樣式的時候使用JavaScript的功能，為CSS附能，并且避免了名稱沖突。

// keyframes returns a unique name based on a hash of the contents of the keyframes
const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

render(
  <

GPU云服務器云服務器 styled-components

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107734.html

styled-components 中文文檔翻譯及不完全指北

摘要：前言官方文檔地址中文文檔地址是一個的第三方庫，是的優秀實踐。初次了解是在讀林昊翻譯的設計模式與最佳實踐一書時。能力所限，已翻譯部分可能仍有字詞錯誤或語句不通順的地方，歡迎有能力的同學幫助糾正。就是其中的佼佼者。前言官方文檔地址： https://www.styled-components.com/ 中文文檔地址：https://github.com/hengg/styled-com...

Vicky 2019-08-29 17:18 評論0 收藏0
styled-components 中文文檔翻譯及不完全指北

摘要：前言官方文檔地址中文文檔地址是一個的第三方庫，是的優秀實踐。初次了解是在讀林昊翻譯的設計模式與最佳實踐一書時。能力所限，已翻譯部分可能仍有字詞錯誤或語句不通順的地方，歡迎有能力的同學幫助糾正。就是其中的佼佼者。前言官方文檔地址： https://www.styled-components.com/ 中文文檔地址：https://github.com/hengg/styled-com...

OnlyLing 2019-08-26 13:22 評論0 收藏0
五分鐘 Styled-components 高級實用技巧

摘要：甚至完美的結合，不僅是從上，還有上。開胃菜用了語法，直接為我們編寫樣式創建組件。其實組件繼承也算是覆蓋的一種。如下當任何父級帶有都會覆蓋的樣式。在上面可以看見我們大量使用了作為選擇器，而還有另外的技巧。寫在前面的廢話回到2013年，React憑空出世。但是在那時，我們會想，oh shit! 我們好不容易分離了HTML/CSS/JS, 為什么出現了JSX，我們又需要把HTML和JS耦...

Profeel 2019-08-29 16:36 評論0 收藏0
五分鐘 Styled-components 高級實用技巧

摘要：甚至完美的結合，不僅是從上，還有上。開胃菜用了語法，直接為我們編寫樣式創建組件。其實組件繼承也算是覆蓋的一種。如下當任何父級帶有都會覆蓋的樣式。在上面可以看見我們大量使用了作為選擇器，而還有另外的技巧。寫在前面的廢話回到2013年，React憑空出世。但是在那時，我們會想，oh shit! 我們好不容易分離了HTML/CSS/JS, 為什么出現了JSX，我們又需要把HTML和JS耦...

DevYK 2019-08-23 11:41 評論0 收藏0
從零到一 styled-components 4.x 的使用

摘要：廢話不多話，來上車安裝或者簡述使用創建全局的樣式首先創建一個文件，例如引全局包里面為項目需要的內容在組件內把引入的當做標簽寫入創建一個局部的樣式引局部包里面為項目需要的內容在組件內把引入的當做標簽寫入類嵌套類似于用法大同小異列舉廢話不多話，來上車！安裝： npm install --save styled-components （或者 yarn add styled-com...

Yuqi 2019-08-23 14:47 評論0 收藏0
React中使用外部樣式的3中方式

摘要：一關于的認識是一種使用編寫樣式的處理方案。意味著你不需要關心如何檢測和刪除那些未使用的代碼。支持變量和繼承你可以使用變量來設置不同的樣式，使用這些不同樣式時只需要給樣式組件傳遞一個參數即可。一、關于css-in-js的認識 1、css-in-js是一種使用 js 編寫 css 樣式的 css 處理方案。它的實現方案有很多，比如styled-components、polished、glam...

vboy1010 2019-05-27 17:42 評論0 收藏0