然而在React 框架下，我們不好繼續使用CSS來設計界面，這是由 React的設計思想所決定的。React的核新思想是，讓每一個控件 成爲高度可重用的獨立個體，這就要求控件的界面設計邏輯和它的 功能邏輯必須整合到一起，
在原有邏輯下，控件的功能邏輯由js編寫，控件的呈現界面由css負責，兩者是分離的。那麼React 是怎麼把他們結合在一起，同時， 又能保證邏輯上的耦合度儘量降低的呢。其實React 並不拒絕使用CSS來設計界面，先從我們熟悉 的css開始，慢慢過渡到React 的界面設計方式上來。
首先在目錄下新建一個空白文件叫style.html,然後我們先完成程序的基本框架代碼
1，先使用css來設計界面元素
<!DOCTYPE html>
<html>
<head>
<title>Styling in React</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<style type="text/css">
#container {
padding: 50px;
background-color: #FFF;
}
</style>
<body>
<div id="container"></div>
</body>
</head>
</html>接下來我們先在界面上顯示一些信息：
<script type="text/babel">
var Letter = React.createClass({
render:function() {
return (
<div>
{this.props.children}
</div>
);
}
});
var destination = document.querySelector("#container");
ReactDOM.render(
<div>
<Letter>T</Letter>
<Letter>Y</Letter>
<Letter>L</Letter>
<Letter>E</Letter>
<Letter>R</Letter>
</div>,
destination)
</script>在代碼中，我們先創建一個Letter組件，在組件中，我們直接使用了它的一個屬性叫children, 在下面的代碼中，我們使用Letter 組件時，在它的標籤中夾着一個字母，分別是T,Y,L,E,R.夾在組件標籤中的元素，就對應於該組件的孩子，也就是this.props.children.
使⽤css來對我們在界面上顯示的幾個字母進行妝點。
div div div {
padding: 10px;
margin: 10px;
background-color: #ffde00;
display: inline-block;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}可以看到，這種做法，當我們的界面組合間套層次很深時，就很容易出錯了，而且代碼邏輯很難維護。 一個好的做法是，通過類名來確定選擇子，代碼如下
.letter {
padding: 10px;
margin: 10px;
background-color: #ffde00;
display: inline-block;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}
var Letter = React.createClass({
render:function() {
return (
<div className="letter">
{this.props.children}
</div>
);
}
});接下來我們看看，如何 以react的方式來修飾界面
按照React的組件化原則，控件的 界面邏輯和業務邏輯，需要放在在一起。這樣，原來用css設計元素界面的辦法就不適用了。React 的做法是，把界面的設計邏輯 做成一個對象，放在組件內部，代碼如下：
var Letter = React.createClass({
render:function() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:"#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
});把原來的css代碼邏輯轉變成了一個json格式的js對象。 在組件的jsx代碼中，使用style關鍵字，把界面設計邏輯所 形成的對象，引入進來。在組件中設置界面邏輯時，需要注意以下幾點： 1是，在指定數值大小時，可以忽略掉px後綴。例如在指定 padding, margin, fontSize 這些屬性的值時，數值後面無需 添加後綴。也就是原來在css中，需要以px結尾的數值，在React 組件中，px都可以去掉。但其他數值，如果不是以px結尾的，那麼相關後綴仍然需要保留。
接下來，我們讓組件樣式設計更靈活一些，我們看看如何實現組件 背景顏色的參數化。
當前我們字母背景色是寫死成黃色的，如果該背景色能隨時變化， 那感覺就相當酷了。使用組件的屬性機制，我們的代碼修改如下：
var Letter = React.createClass({
render:function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor:this.props.bgcolor
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
});
var destination = document.querySelector("#container");
ReactDOM.render(
<div>
<Letter bgcolor="#58B3FF">T</Letter>
<Letter bgcolor="#FF605F">Y</Letter>
<Letter bgcolor="#FFD52E">L</Letter>
<Letter bgcolor="#49DD8E">E</Letter>
<Letter bgcolor="#AE99FF">R</Letter>
</div>,
destination
);結論：
傳統的開發方法是把業務邏輯，界面設計分別分佈在html, js, 和css中，這種做法在開發簡單網頁應用時是可以的。但當我們 需要開發複雜的可重用組件時，原有方法就不適合了，因爲原來 的做法把業務邏輯和界面設計分隔開，而組件化設計需要把所有 相關邏輯都得整合在一起。
當今趨勢是，網頁應用越來越複雜，功能也越來越強大，依賴 React的設計開發方法將是未來網頁應用開發的主流。原有業務 邏輯與界面設計邏輯相互分開的做法，與當下網頁應用越來越 複雜，功能也越來越強大的趨勢，應當是不相符合的。