然而在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的设计开发方法将是未来网页应用开发的主流。原有业务 逻辑与界面设计逻辑相互分开的做法，与当下网页应用越来越 复杂，功能也越来越强大的趋势，应当是不相符合的。