JSX是React中一個(gè)重要的概念，它是一種JavaScript的語(yǔ)法擴(kuò)展。在React中，我們使用JSX來(lái)描述用戶界面的組成，通常情況下，組件中的JSX代碼與CSS樣式是分離的。

然而，有時(shí)候我們需要在組件中引入CSS樣式，以來(lái)隔離不同的組件樣式，或者實(shí)現(xiàn)一些比較特殊的樣式效果。接下來(lái)，我們就來(lái)看看JSX如何引入CSS樣式。

// 引入CSS樣式的方式一：使用import
import './style.css'
function MyComponent() {
return (
Title
Content
)
}
// style.css
.my-component {
background-color: #f7f7f7;
padding: 10px;
border: 1px solid #ccc;
}

在這個(gè)例子中，我們使用了import語(yǔ)句來(lái)引入style.css文件，然后在組件中使用className屬性來(lái)應(yīng)用樣式。在樣式文件中，我們定義了.my-component選擇器來(lái)設(shè)置背景色、邊框樣式等。

// 引入CSS樣式的方式二：直接在JSX中定義樣式
function MyComponent() {
return (
Title
Content
)
}

在這個(gè)例子中，我們直接在JSX中使用style屬性來(lái)定義樣式，注意這里style屬性的寫法與普通的CSS樣式并不一樣。我們使用了兩個(gè)大括號(hào)來(lái)包含一個(gè)JavaScript對(duì)象，對(duì)象中每個(gè)屬性都對(duì)應(yīng)一條CSS樣式規(guī)則。

以上兩種方式都可以實(shí)現(xiàn)在React組件中引入CSS樣式，你可以選擇適合自己的方式來(lái)實(shí)現(xiàn)組件樣式。