styled-components的用法詳解

這次帶給大家styled-components的用法詳解，使用styled-components的注意事項有哪些，以下就是實戰案例，一起來看一下。

styled components 一種全新的控制樣式的程式設計方式，它能解決CSS 全域作用域的問題，而且移除了樣式和元件間的映射關係

import React from 'react';
import styled from 'styled-components';
import { render } from 'react-dom';
 
const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;
 
class App extends React.Component {
    render() {
        return (
            <Title>Hello world</Title>
        )
    }
}
 
render(
    <App />,
    document.getElementById('app')
);

styled.h1 是一個標籤模板函數

styled.h1 函數傳回一個React Component ， styled components 會為這個React Component 新增一個class ，該class 的值為一個隨機字串。傳給styled.h1 的模板字串參數的值其實是CSS 語法，這些CSS 會附加到該React Component 的class 中，從而為React Component 新增樣式

#二、基於props 自訂主題

const Button = styled.button`
  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(
  <p>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </p>
);

我們在元件中傳入的所有props 都可以在定義元件時取得到，這樣就可以很容易實現組件主題的客製化。如果沒有styled-components 的情況下，需要使用元件style 屬性或定義多個class 的方式來實作

三、元件樣式繼承

通常在css 中一般會透過給class 傳入多個name 透過空格分隔的方式來重複使用class 定義，類似class="button tomato" 。在styled-components 中利用了js 的繼承實作了這種樣式的重複使用：

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

子元件中的屬性會覆寫父元件中同名的屬性

##四、元件內部使用className

在日常開發中總是會出現覆蓋元件內部樣式的需求，你可能會想要在styled-components 中使用className ，或是使用第三方元件時。

<Wrapper>
  <h4>Hello Word</h4>
  <p className="detail"></p>
</Wrapper>

五、元件中維護其他屬性

styled-components 同時支援為元件傳入html 元素的其他屬性，例如為input 元素指定一個type 屬性，我們可以使用attrs 方法來完成

const Password = styled.input.attrs({
  type: 'password',
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

在實際開發中，這個方法還有一個有用處，用來引用第三方類別庫的css 樣式：

const Button = styled.button.attrs({
  className: 'small',
})`
  background: black;
  color: white;
  cursor: pointer;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid black;
  border-radius: 3px;
`;

編譯後的html 結構如下：

<button class="sc-gPEVay small gYllyG">
  Styled Components
</button>

可以用這種方式來使用在別處定義的small 樣式，或者單純為了識別自己定義的class ，因為正常情況下我們得到的class 名是不可讀的編碼

六、CSS 動畫支援

styled-components 同樣對css 動畫中的@keyframe 做了很好的支援。

import { keyframes } from 'styled-components';
const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;
const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`;

七、相容現在已有的react components 和css 框架

styled-components 採用的css-module 的模式有另外一個好處就是可以很好的與其他的主題庫進行相容。因為大部分的css 框架或css 主題都是以className 的方式進行樣式處理的，額外的className 和主題的className 並不會有太大的衝突

styled-components 的語法同樣支援對一個React 元件進行擴充

const Styledp = styled(Row)`
  position: relative;
  height: 100%;
  .image img {
    width: 100%;
  }
  .content {
    min-height: 30em;
    overflow: auto;
  }
  .content h2 {
    font-size: 1.8em;
    color: black;
    margin-bottom: 1em;
  }
`;

缺點

不能用stylelint 檢查你的Css 程式碼

在使用styled-components 的過程中也會遇到有些問題，例如我們的專案會用stylelint來做樣式程式碼的檢查，但使用了styled-compoents 後就沒辦法讓stylelint的規則生效了。

不能用prettier 來格式化你的Css 程式碼

現在prettier不僅可以幫你格式化JS 程式碼，還可以格式化CSS 程式碼，但如果使用了styled-components的話，JS中的字串模板內容沒有辦法用prettier來格式化，這也比較尷尬。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS3的滑鼠移入圖片動態提示效果

Sticky Footer 絕對底部的方法

CSS3做出條紋大背景
#

以上是styled-components的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！