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樣式表達式