Css in Js 一次實踐

calx 發布于2019-08-30 15:55 / 3577人閱讀

摘要：最近需要做一個表格組件，組件需求指定行列可以跨行跨列行和行之間有分割線最終采用實現需求。所以考慮采用的形式。關于相關的概念介紹可以參考阮一峰老師的文章介紹。然后返回一個組件，把組件替換原來的即可。想嘗試的小伙伴現在就可以碼一遍。

最近需要做一個表格組件，組件需求:

指定行、列

可以跨行、跨列

行和行之間有分割線

最終采用grid實現需求。實現的時候遇到一個問題，如果css和js分開寫，css只能是定值，沒有靈活性。所以考慮采用css in js的形式。關于css in js相關的概念介紹可以參考阮一峰老師的文章：css in js 介紹。

在github上找了一下關于這方面的組件，發現styled components 非常不錯，簡單易上手，

npm下載：`npm i styled-components -S`

注意：

React < 16 需要下載3.x.x版本的

根據文檔先寫一個簡單的demo。

可以看到，它的實現方式并不是傳統的以對象的形式寫樣式，而是將需要添加樣式的元素加到styled對象上，然后跟一個(``)反引號標簽，在里面以正常的css格式寫樣式。然后返回一個組件，把組件替換原來的div即可。

實現效果：

html代碼：

css代碼：

剛才我們添加樣式的元素是html元素，那么給組件添加樣式可以么？實踐一下：

const H1 = ({ className }) => 我是App;
const HH = styled.H1`
  font-size: 30px;
  color: red;
`;

運行，報錯：

咋回事？原來styled不支持以 . 符號的形式為組件添加樣式，需要以參數形式傳遞，修改上面代碼

const HH = styled(H1)`
  font-size: 30px;
  color: red;
`;

將H1組件以參數形式傳遞給styled,就可以了。

想給元素添加偽元素樣式，子元素樣式可以么？沒問題，styled components支持樣式嵌套，按照類似Less或Scss的書寫方式就可以了。

const Container = styled.div`
  width: 300px;
  max-width: 500px;
  min-width: 200px;
  transition: all 1s ease-in-out;
  background-color: rgba(240, 240, 240, 0.9);
  ::after {
    content: "after";
    display: table;
    color: blue;
  }
  span {
    color: green;
  }
`;

以上我們寫的組件都是在Class外面，那我們要根據props設定樣式怎么辦？styled components同樣支持在Class內生成組件，并接受props傳遞過來的值，這個props并不是我們的Class接收的props，它是添加樣式的元素上的Props，意思就是

class Demo {
    
    render(){
        return 
    }
}

Demo.defaultProps = {
    age: 18
}

const Styled = styled.p`
    color: ${props=>{console.log(props)}} // {name: "guoshi",theme:{...}}
`

如果想使用Class的props怎么辦？看代碼:

generateStyle = () => {
        const {row, col, justify, data, prefixCls, showborder = true, rowgap = 0, colgap = 0} = this.props;
        const child = [];
        data.map((item,index)=> (item.colSpan || item.rowSpan) ? child.push({index:index+1,colSpan:item.colSpan, rowSpan:item.rowSpan}):null);
        const bordernone = [];
        for(let i = 0; i < row; i++) {
            bordernone.push(1 + i*col);
        }
        const UlContainer = styled.ul.attrs({className: prefixCls})`
                display: grid;
                grid-template-columns: ${()=> {
                    let arr = [];
                    arr.length = col;
                    return arr.fill("1fr").join(" ");
                }};
                grid-template-rows:  ${()=> {
                    let arr = [];
                    arr.length = row;
                    return arr.fill("1fr").join(" ");
                }};
                grid-gap: ${rowgap} ${colgap} ;
                justify-items: ${()=> justify || "center"};

                ::before {
                    display: none;
                }
                
                li {
                    width: 100% !important;
                }

                ${
                     child.map(({index, colSpan, rowSpan}) =>`
                        li:nth-child(${index}) {
                            grid-column-start: ${index%col === 0 ? index : index%col};
                            grid-column-end: ${colSpan ? (colSpan+(index%col === 0 ? index : index%col)) : ((index%col === 0 ? index : index%col)+1)}
                            grid-row-start: ${Math.ceil(index/col)};
                            grid-row-end: ${rowSpan  ? rowSpan+Math.ceil(index/col) : Math.ceil(index/col)+1};
                            align-items: start;
                        }
                     `).join(" ")
                 }
                
                li + li {
                    border-left: 1px dashed rgba(0,0,0,0.3);
                }

                ${
                    bordernone.map(bordernoneindex=>`
                        li:nth-child(${bordernoneindex}) {
                            border-left: none;
                        }
                    `).join(" ")
                }
                
            `;
        
            return UlContainer;
    }

提前把最后代碼放出來了，styled.ul.attrs({})就是為元素添加額外的屬性，比如className、placeholder等，從代碼中可以看到，無論是Class的props還是元素自身傳進來的props，styled都可以接收,你可以自定義任何你想實現的規則,更方便我們配置的靈活性。

其實到這里，使用上沒有任何問題了，關于keyframes等規則官網上都有demo，也非常容易實現。想嘗試的小伙伴現在就可以碼一遍。不過本章遺留了很多問題：

styled.div & styled(div) 有什么區別

模版字符串中的樣式是怎么解析的？為什么可以嵌套？

為什么會返回一個組件？

下一章，我會根據styled componnets源碼解答上述問題。

最后，祝生活愉快。

云服務器 GPU云服務器 css-in-js js 第一次打開頁面 js 公告只顯示一次 js加載當前頁面一次

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

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

HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

MudOnTire 2019-08-21 18:25 評論0 收藏0
Webpack 最佳實踐總結(三)

摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業務邏輯開發流程需要經過預處理器如或，然后再經過后處理器如進行深加工。還未看的，可以點擊查看上兩篇文章喲：Webpack 最佳實踐總結(一)、Webpack 最佳實踐總結(二) 好了，這篇是第三篇，也是完結篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會讓你失望的整合 CSS 加工流有時候，前端項目中除了 JavaScript ...

pkhope 2019-08-20 18:53 評論0 收藏0
Webpack 最佳實踐總結(三)

摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業務邏輯開發流程需要經過預處理器如或，然后再經過后處理器如進行深加工。還未看的，可以點擊查看上兩篇文章喲：Webpack 最佳實踐總結(一)、Webpack 最佳實踐總結(二) 好了，這篇是第三篇，也是完結篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會讓你失望的整合 CSS 加工流有時候，前端項目中除了 JavaScript ...

jerryloveemily 2019-08-29 13:13 評論0 收藏0