這篇文章將為大家詳細(xì)講解有關(guān)styled-components怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的蘆溪網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

styled components 一種全新的控制樣式的編程方式，它能解決 CSS 全局作用域的問(wèn)題，而且移除了樣式和組件間的映射關(guān)系

import React from 'react';
import styled from 'styled-components';
import { render } from 'react-dom';
 
const Title = styled.h2`
    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.h2 是一個(gè)標(biāo)簽?zāi)０搴瘮?shù)

styled.h2 函數(shù)返回一個(gè) React Component ， styled components 會(huì)為這個(gè) React Component 添加一個(gè) class ，該 class 的值為一個(gè)隨機(jī)字符串。傳給 styled.h2 的模板字符串參數(shù)的值實(shí)際上是 CSS 語(yǔ)法，這些 CSS 會(huì)附加到該 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(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

我們?cè)诮M件中傳入的所有 props 都可以在定義組件時(shí)獲取到，這樣就可以很容易實(shí)現(xiàn)組件主題的定制。如果沒(méi)有 styled-components 的情況下，需要使用組件 style 屬性或者定義多個(gè) class 的方式來(lái)實(shí)現(xiàn)

三、組件樣式繼承

通常在 css 中一般會(huì)通過(guò)給 class 傳入多個(gè) name 通過(guò)空格分隔的方式來(lái)復(fù)用 class 定義，類似 class="button tomato" 。在 styled-components 中利用了 js 的繼承實(shí)現(xiàn)了這種樣式的復(fù)用：

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;
`;

子組件中的屬性會(huì)覆蓋父組件中同名的屬性

四、組件內(nèi)部使用 className

在日常開發(fā)中總會(huì)出現(xiàn)覆蓋組件內(nèi)部樣式的需求，你可能想在 styled-components 中使用 className ，或者在使用第三方組件時(shí)。

<Wrapper>
  <h5>Hello Word</h5>
  <div className="detail"></div>
</Wrapper>

五、組件中維護(hù)其他屬性

styled-components 同時(shí)支持為組件傳入 html 元素的其他屬性，比如為 input 元素指定一個(gè) type 屬性，我們可以使用 attrs 方法來(lái)完成

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

在實(shí)際開發(fā)中，這個(gè)方法還有一個(gè)有用處，用來(lái)引用第三方類庫(kù)的 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 結(jié)構(gòu)如下：

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

可以用這種方式來(lái)使用在別處定義的 small 樣式，或者單純?yōu)榱俗R(shí)別自己定義的 class ，因?yàn)檎Ｇ闆r下我們得到的 class 名是不可讀的編碼

六、CSS 動(dòng)畫支持

styled-components 同樣對(duì) css 動(dòng)畫中的 @keyframe 做了很好的支持。

import { keyframes } from 'styled-components';
const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`;

七、兼容現(xiàn)在已有的 react components 和 css 框架

styled-components 采用的 css-module 的模式有另外一個(gè)好處就是可以很好的與其他的主題庫(kù)進(jìn)行兼容。因?yàn)榇蟛糠值?css 框架或者 css 主題都是以 className 的方式進(jìn)行樣式處理的，額外的 className 和主題的 className 并不會(huì)有太大的沖突

styled-components 的語(yǔ)法同樣支持對(duì)一個(gè) React 組件進(jìn)行擴(kuò)展

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

缺點(diǎn)

不能用 stylelint 檢查你的 Css 代碼

在使用 styled-components 的過(guò)程中也會(huì)遇到一些問(wèn)題，比如我們的項(xiàng)目會(huì)用stylelint來(lái)做樣式代碼的檢查，但是使用了 styled-compoents 后就沒(méi)辦法讓stylelint的規(guī)則生效了。

不能用 prettier 來(lái)格式化你的 Css 代碼

現(xiàn)在prettier不僅可以幫你格式化 JS 代碼，還可以格式化 CSS 代碼，但如果使用了styled-components的話，JS 中的字符串模板內(nèi)容沒(méi)有辦法使用prettier來(lái)格式化，這個(gè)也比較尷尬。

關(guān)于“styled-components怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章名稱：styled-components怎么用
網(wǎng)頁(yè)路徑：http://www.chinadenli.net/article10/iieigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、面包屑導(dǎo)航、小程序開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站收錄、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)