摘要:甚至完美的結合,不僅是從上,還有上。開胃菜用了語法,直接為我們編寫樣式創建組件。其實組件繼承也算是覆蓋的一種。如下當任何父級帶有都會覆蓋的樣式。在上面可以看見我們大量使用了作為選擇器,而還有另外的技巧。
寫在前面的廢話
回到2013年,React憑空出世。但是在那時,我們會想,oh shit! 我們好不容易分離了HTML/CSS/JS, 為什么出現了JSX,我們又需要把HTML和JS耦合在一起?React 創造了 HTML in JS. 在React中,我們知道,一切即組件。那既然HTML能在js里寫,為什么我們不把CSS也一起寫呢?這樣不才是一個真正的組件嗎?
Styled-components就是為React而生的,它是CSS in JS的下一代解決方案。以往我們想要做到css scope都需要在webpack中各種配置,或者使用js的解決方案。而styled-components你只需要import styled from "styled-components";即可。
甚至React完美的結合,不僅是從TagName上,還有Props上。使我們的代碼有更好的語義化,可維護性更強,效率更高。當然我們無需考慮它的學習成本,只要你用過CSS或者SASS都可以立刻上手,因為它本身就是一種超集的存在。
接下來,我會逐步的介紹一些這段時間以來,我非常喜歡的獨有的特性。開胃菜
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語法,直接為我們編寫樣式創建組件。繼承
styled-components繼承樣式有兩種寫法如下
const Button = styled.button` background: #abcdef; border-radius: 3px; border: none; color: white; `; const OtherButton1 = styled(button)``; const OtherButton2 = button.extend``; // 老的寫法,不推薦,未來會被廢棄
寫法一的繼承,僅僅只會創建不一樣的css rule,而第二種寫法會復制一遍base component的css rule,然后在添加不一樣的進行css 權重覆蓋。不推薦
當然,還有一種有趣的“繼承” withComponent,我們可以利用withComponent改變渲染的標簽
const Li = styled.li` color:#abcdef; `; const A = Li.withComponent("a"); // 將會渲染a標簽
編譯后他們會使用不同的className,這對我們想用同個樣式,但是不同標簽非常有用。
樣式覆蓋這里所說的樣式覆蓋,主要是一些交互上的行為(hover, active)覆蓋。其實組件繼承也算是覆蓋的一種。
以往我們的覆蓋寫法如下:
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 組件方式對我們的DOM進行引用,從而覆蓋樣式,如下
const Icon = styled.span` color: red; `; const ListItem = styled.li` &:hover ${Icon} { color: green; } `;
這依舊是我們過去的思路來覆蓋樣式,只是我們把選擇器直接使用styled組件引用罷了。擁有這樣的接口,就更加讓我們無需去思考需要給組件取什么className或者id,從而達到覆蓋樣式的做法。然而還有我最喜歡的另外一種寫法。
TIPS:組件的引用必須是styled-components包裝后的組件,直接是react的會報錯
const ListItem = styled.li``; const Icon = styled.span` color: red; ${ListItem}:hover & { // & 代表icon組件 color: green; } `;
這段代碼實現的是一樣的功能,只是我們思路轉換了一下??梢园l現這樣的代碼更加沒有侵入性。更加符合開放封閉原則,當我們不需要這個Icon組件時,直接把這個Icon刪除即可,我們不用去父組件里尋找與該組件有關的樣式,不容易造成樣式污染。突然覺得眼前一亮,有木有!
當然這種“子組件引用父級”的功能,還有更加廣泛的引用。你可以選擇該DOM任何parent,再對自己進行樣式的覆蓋。如下:
const Icon = styled.span` color: red; html.ie-8 & { // fuck ie8 color: blue; } body.xxx & { color: green; } `;
當任何父級帶有class都會覆蓋Icon的樣式。這種“子組件引用父級”的功能也是我最喜歡的功能沒有之一。
在上面可以看見我們大量使用了&作為選擇器,而&還有另外的技巧。
const Example = styled.li` color: red; & { color:blue; } && { color: green; } `;
大家可以猜猜,這最終會渲染成什么?
最終會編譯成如下class,但是我們的一個&就代表一個class權重也就是說我們最后會渲染原諒色,原因是li被作用于了.fmpfVE.fmpfVE樣式表。這個功能非常有用,比如在你使用第三方組件想要覆蓋它的樣式的時候,我們就可以加多個&來提高樣式權重,從而覆蓋第三方組件的樣式
Theme關于Theme只想說一點,那就是結合第三方組件應該如何傳入Theme呢?我們有一個簡單的技巧。比如使用了Material-UI,如果我們需要基于它拓展我們自己的組件,并且需要樣式。
const ThemeProvider: React.SFC= ({ themeName, children }) => { const theme = themes[themeName]; return ( ); }; {React.Children.only(children)}
之后只需要把我們需要調用的組件使用styled-components提供的withTheme包裝一下我們的組件來獲取我們的theme。
這樣既可以在我們的styled-components里取到theme,material里也可以了。
以上就是我們所有的技巧了, 看了這么多有意思的黑科技,難道你還不愛上styled-components嗎?
個人網站 http://www.meckodo
Github: https://github.com/MeCKodo
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97312.html
摘要:甚至完美的結合,不僅是從上,還有上。開胃菜用了語法,直接為我們編寫樣式創建組件。其實組件繼承也算是覆蓋的一種。如下當任何父級帶有都會覆蓋的樣式。在上面可以看見我們大量使用了作為選擇器,而還有另外的技巧。 寫在前面的廢話 回到2013年,React憑空出世。但是在那時,我們會想,oh shit! 我們好不容易分離了HTML/CSS/JS, 為什么出現了JSX,我們又需要把HTML和JS耦...
摘要:如果我們使用的話,就可以這么寫我們要修改主色,只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到,生成的中并沒有任何的變化,那這個做了什么呢其實在通過引用的對象內發生了變化。 作為一個前端,毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言,沒有編程語言的諸多特性,比如變量定義,復用,嵌套等,所以相應的開發效率也受到限制。在追求效率和自動化的當下...
摘要:如果我們使用的話,就可以這么寫我們要修改主色,只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到,生成的中并沒有任何的變化,那這個做了什么呢其實在通過引用的對象內發生了變化。 作為一個前端,毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言,沒有編程語言的諸多特性,比如變量定義,復用,嵌套等,所以相應的開發效率也受到限制。在追求效率和自動化的當下...
摘要:如果我們使用的話,就可以這么寫我們要修改主色,只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到,生成的中并沒有任何的變化,那這個做了什么呢其實在通過引用的對象內發生了變化。 作為一個前端,毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言,沒有編程語言的諸多特性,比如變量定義,復用,嵌套等,所以相應的開發效率也受到限制。在追求效率和自動化的當下...
摘要:一關于的認識是一種使用編寫樣式的處理方案。意味著你不需要關心如何檢測和刪除那些未使用的代碼。支持變量和繼承你可以使用變量來設置不同的樣式,使用這些不同樣式時只需要給樣式組件傳遞一個參數即可。 一、關于css-in-js的認識 1、css-in-js是一種使用 js 編寫 css 樣式的 css 處理方案。它的實現方案有很多,比如styled-components、polished、glam...
閱讀 3768·2023-04-25 21:09
閱讀 3128·2021-10-20 13:48
閱讀 2942·2021-09-24 10:25
閱讀 2931·2021-08-21 14:08
閱讀 1790·2019-08-30 15:56
閱讀 976·2019-08-30 15:52
閱讀 1841·2019-08-29 14:11
閱讀 3562·2019-08-29 11:01