2.10 JSX样式表达式

React语法支持内联形式的CSS样式，因此可以使用JSX样式表达式来实现页面风格。下面看一个具体的代码实例：

【代码2-10】（详见源代码目录ch02-react-jsx-exp-style.html文件）

关于【代码2-10】的说明：

●第18~22行代码、第23~27行代码和第28~32行代码，分别通过const运算符定义了三组对象（css_p_lg、css_p_md和css_p_sm），每个对象均定义了不同的CSS样式。

●在第37~39行定义的JSX代码中，实现了一组段落<p>标签元素。在每个<p>标签元素内，通过style属性使用了JSX样式表达式，将前面定义的样式对象（css_p_lg、css_p_md和css_p_sm）应用在这一组段落内容中。

测试网页的效果如图2.9所示。如图中的标识所示，段落<p>标签元素中的内容通过JSX样式表达式实现了不同的样式风格。

图2.9 React JSX样式表达式