標籤：

如何在 React 中運用 CSS？

01-05

請問在ReactJs中如何有效地運用CSS？

是在component中直接插入CSS嗎？

我在github搜到了一些類庫，分別是radium和react-style，它們所用的都是inline的「CSS into JS」模式，請問這種方法好嗎？ 相比傳統的與網頁分離的CSS模式，有什麼優勢和缺陷？

目前Github上對這種inline CSS比較支持，我比較有疑慮。

因為CSS和網頁分離的好處是顯而易見的，可復用。 類似Radium的用法是讓React Component可復用。

請前端大牛評價兩種模式的優劣。

建議 CSS in JS 寫法，雖然感覺推翻了多年的 CSS 工作進展。

主要原因還是 CSS 的全局污染。

模塊化、組件化一直是前端不斷優化追求的目標。傳統的 CSS 無法很好的進行模塊化。只能人為通過命名空間來約束這段樣式在某個模塊中，這種約束很弱的，指不定哪天來個新人不知道這個，就隨便命名產生衝突影響了其他的組件。

而 CSS in JS 的寫法，可以解決這個問題。如果有些場景實在是需要 CSS 外聯才能實現（比如 animation 的一些動畫），可以使用 Glen Maddern: Internet Pro CSS modules 來解決這個問題。

最近在用styled-components: GitHub - styled-components/styled-components: Visual primitives for the component age

感覺用起來比較舒服，之前項目中使用css-module，配合各種less sass scss postcss還有全局css，也滿湊合

有一段嘗試用radium，感覺inline的寫法有局限性，動畫什麼的比較麻煩

關鍵是要找到一個能和頁面設計師共同開發提高效率，學習成本不高的寫法

我來寫例子吧；然後把我webpack.config.js配置信息。

react的css開發，一般採用模塊化的形式進行。一般react中css可以分為三部分，

快發環境給予node.js、模塊化構建用webpack.

第一：全局部分：比如base.css（用來通用的css，如：.clearfix、.mt10、.mt05之類的）。這個文件可以直接在入口文件如（index.html）中直接用&的形式直接引入

第二：通用部分：比如我可以把整個webapp需要用到的按鈕樣式作為一個樣式寫到一個文件里如：common/button.css，寫法的話遵循模塊化開發的方式進行（composes）；

貼端代碼如下：

.btn {
height: 35px;
line-height: 35px;
border-radius: 2px;
display: inline-block;
text-align: center;
user-select: none;
text-align: center;
box-sizing: border-box;
font-size: 14px;
}

.btn-primary {
composes : btn;
border: 1px solid #E0E0E0;
background-image: -webkit-linear-gradient(top, #f9f9f9, #e7e9eb);
background-repeat: repeat-x;
color: #333;
}
.btn-blue {
composes : btn;
border: 1px solid #0B62BD;
background-image: -webkit-linear-gradient(top, #0e7bef, #0d73da);
background-repeat: repeat-x;
color: #fff;
}

第二：組件內的css：比如我們寫了一個confirm的通用組件，那麼

comfirm組件的目下應該包含兩個文件comfirm.js 和 comfirm.css

在comfirm.js中用var Styles = require("./confirm.css");的形式進行引用。

在render的時候進行調用調用形式：&

※如何評價Knot.js?
※為什麼沒有人出JS版的數據結構與演算法？
※JS模塊載入器載入原理是怎麼樣的？
※HTML 標籤屬性的全稱？
※如何評價性能大幅提升的Chrome 53?

TAG:JavaScript | 前端工程師 | React |