国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

五分鐘 Styled-components 高級(jí)實(shí)用技巧

Profeel / 574人閱讀

摘要：甚至完美的結(jié)合，不僅是從上，還有上。開胃菜用了語(yǔ)法，直接為我們編寫樣式創(chuàng)建組件。其實(shí)組件繼承也算是覆蓋的一種。如下當(dāng)任何父級(jí)帶有都會(huì)覆蓋的樣式。在上面可以看見我們大量使用了作為選擇器，而還有另外的技巧。

寫在前面的廢話

回到2013年，React憑空出世。但是在那時(shí)，我們會(huì)想，oh shit! 我們好不容易分離了HTML/CSS/JS, 為什么出現(xiàn)了JSX，我們又需要把HTML和JS耦合在一起？React 創(chuàng)造了 HTML in JS. 在React中，我們知道，一切即組件。那既然HTML能在js里寫，為什么我們不把CSS也一起寫呢？這樣不才是一個(gè)真正的組件嗎？

Styled-components就是為React而生的，它是CSS in JS的下一代解決方案。以往我們想要做到css scope都需要在webpack中各種配置，或者使用js的解決方案。而styled-components你只需要import styled from "styled-components";即可。

甚至React完美的結(jié)合，不僅是從TagName上，還有Props上。使我們的代碼有更好的語(yǔ)義化，可維護(hù)性更強(qiáng)，效率更高。當(dāng)然我們無(wú)需考慮它的學(xué)習(xí)成本，只要你用過(guò)CSS或者SASS都可以立刻上手，因?yàn)樗旧砭褪且环N超集的存在。

接下來(lái)，我會(huì)逐步的介紹一些這段時(shí)間以來(lái)，我非常喜歡的獨(dú)有的特性。
開胃菜 
const Button = styled.button`
  background: #abcdef;
  border-radius: 3px;
  border: none;
  color: white;
`;
console.log(Button); //styled component
console.log(new Button()); // react component 

export default CustomButton extends React.component {
    render() {
        return 
styled-components 用了tagged template語(yǔ)法，直接為我們編寫樣式創(chuàng)建組件。
繼承

styled-components繼承樣式有兩種寫法如下

const Button = styled.button`
  background: #abcdef;
  border-radius: 3px;
  border: none;
  color: white;
`;

const OtherButton1 = styled(button)``;
const OtherButton2 = button.extend``; // 老的寫法，不推薦，未來(lái)會(huì)被廢棄

寫法一的繼承，僅僅只會(huì)創(chuàng)建不一樣的css rule，而第二種寫法會(huì)復(fù)制一遍base component的css rule，然后在添加不一樣的進(jìn)行css 權(quán)重覆蓋。不推薦

當(dāng)然，還有一種有趣的“繼承” withComponent，我們可以利用withComponent改變渲染的標(biāo)簽

const Li = styled.li`
    color:#abcdef;
`;
const A = Li.withComponent("a"); // 將會(huì)渲染a標(biāo)簽

編譯后他們會(huì)使用不同的className，這對(duì)我們想用同個(gè)樣式，但是不同標(biāo)簽非常有用。

樣式覆蓋 
這里所說(shuō)的樣式覆蓋，主要是一些交互上的行為(hover, active)覆蓋。其實(shí)組件繼承也算是覆蓋的一種。

以往我們的覆蓋寫法如下：

const ListItem = styled.li`
  padding: 0;
  height: 48px;
  
  &.left-item-focus {
    .left-link {
       background: ${props => props.color};
    }
  }
  &:hover {
     .left-icon {
        color: #9e9e9e; // 500
     }
  }
`;

而在styled中，我們可以使用styled-components 組件方式對(duì)我們的DOM進(jìn)行引用，從而覆蓋樣式，如下

const Icon = styled.span`
    color: red;
`;

const ListItem = styled.li`

    &:hover ${Icon} {
        color: green;
    }
`;

這依舊是我們過(guò)去的思路來(lái)覆蓋樣式，只是我們把選擇器直接使用styled組件引用罷了。擁有這樣的接口，就更加讓我們無(wú)需去思考需要給組件取什么className或者id，從而達(dá)到覆蓋樣式的做法。然而還有我最喜歡的另外一種寫法。

TIPS：組件的引用必須是styled-components包裝后的組件，直接是react的會(huì)報(bào)錯(cuò)
const ListItem = styled.li``;

const Icon = styled.span`
    color: red;
    
    ${ListItem}:hover & { // & 代表icon組件
        color: green;
    }
`;

這段代碼實(shí)現(xiàn)的是一樣的功能，只是我們思路轉(zhuǎn)換了一下。可以發(fā)現(xiàn)這樣的代碼更加沒有侵入性。更加符合開放封閉原則，當(dāng)我們不需要這個(gè)Icon組件時(shí)，直接把這個(gè)Icon刪除即可，我們不用去父組件里尋找與該組件有關(guān)的樣式，不容易造成樣式污染。突然覺得眼前一亮，有木有！

當(dāng)然這種“子組件引用父級(jí)”的功能，還有更加廣泛的引用。你可以選擇該DOM任何parent，再對(duì)自己進(jìn)行樣式的覆蓋。如下：

const Icon = styled.span`
    color: red;
    
    html.ie-8 & {
        // fuck ie8
        color: blue;
    }
    body.xxx & {
        color: green;
    }
`;

當(dāng)任何父級(jí)帶有class都會(huì)覆蓋Icon的樣式。這種“子組件引用父級(jí)”的功能也是我最喜歡的功能沒有之一。

在上面可以看見我們大量使用了&作為選擇器，而&還有另外的技巧。

const Example = styled.li`
    color: red; 
    & {
        color:blue;
    }
    
    && {
        color: green;
    }
`;

大家可以猜猜，這最終會(huì)渲染成什么？

  • 最終會(huì)編譯成如下class，但是我們的一個(gè)&就代表一個(gè)class權(quán)重也就是說(shuō)我們最后會(huì)渲染原諒色，原因是li被作用于了.fmpfVE.fmpfVE樣式表。這個(gè)功能非常有用，比如在你使用第三方組件想要覆蓋它的樣式的時(shí)候，我們就可以加多個(gè)&來(lái)提高樣式權(quán)重，從而覆蓋第三方組件的樣式

    Theme

    關(guān)于Theme只想說(shuō)一點(diǎn)，那就是結(jié)合第三方組件應(yīng)該如何傳入Theme呢？我們有一個(gè)簡(jiǎn)單的技巧。比如使用了Material-UI，如果我們需要基于它拓展我們自己的組件，并且需要樣式。

    const ThemeProvider: React.SFC = ({ themeName, children }) => {
  const theme = themes[themeName];
  return (
    
      
        {React.Children.only(children)}
      
    
  );
};

    之后只需要把我們需要調(diào)用的組件使用styled-components提供的withTheme包裝一下我們的組件來(lái)獲取我們的theme。

    這樣既可以在我們的styled-components里取到theme，material里也可以了。

    以上就是我們所有的技巧了， 看了這么多有意思的黑科技，難道你還不愛上styled-components嗎？

    個(gè)人網(wǎng)站 http://www.meckodo

    Github: https://github.com/MeCKodo

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113854.html

    相關(guān)文章

    • 五分鐘 Styled-components 高級(jí)實(shí)用技巧

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

      DevYK 評(píng)論0 收藏0

    • css還可以這么寫？

      摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會(huì)編譯成可以看到，生成的中并沒有任何的變化，那這個(gè)做了什么呢其實(shí)在通過(guò)引用的對(duì)象內(nèi)發(fā)生了變化。 作為一個(gè)前端，毫無(wú)疑問(wèn)css肯定是最基礎(chǔ)的一項(xiàng)技能之一。css是一個(gè)標(biāo)記語(yǔ)言，沒有編程語(yǔ)言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。在追求效率和自動(dòng)化的當(dāng)下...

      kidsamong 評(píng)論0 收藏0

    • css還可以這么寫？

      摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會(huì)編譯成可以看到，生成的中并沒有任何的變化，那這個(gè)做了什么呢其實(shí)在通過(guò)引用的對(duì)象內(nèi)發(fā)生了變化。 作為一個(gè)前端，毫無(wú)疑問(wèn)css肯定是最基礎(chǔ)的一項(xiàng)技能之一。css是一個(gè)標(biāo)記語(yǔ)言，沒有編程語(yǔ)言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。在追求效率和自動(dòng)化的當(dāng)下...

      zhiwei 評(píng)論0 收藏0

    • css還可以這么寫？

      摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會(huì)編譯成可以看到，生成的中并沒有任何的變化，那這個(gè)做了什么呢其實(shí)在通過(guò)引用的對(duì)象內(nèi)發(fā)生了變化。 作為一個(gè)前端，毫無(wú)疑問(wèn)css肯定是最基礎(chǔ)的一項(xiàng)技能之一。css是一個(gè)標(biāo)記語(yǔ)言，沒有編程語(yǔ)言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。在追求效率和自動(dòng)化的當(dāng)下...

      RaoMeng 評(píng)論0 收藏0

    • React中使用外部樣式的3中方式

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

      vboy1010 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <