在 React 中,我們可以使用組件來構建我們的應用程序。組件由標記和 JavaScript 代碼組成,并通常具有自己的樣式。那么,我們應該如何在組件上添加樣式呢?
// 導入樣式表 import './styles.css'; // 定義組件 function MyComponent() { return (); }Hello, World!
在上面的代碼中,我們首先導入樣式表,然后在組件中使用 className 屬性來指定樣式類。接下來,我們可以定義樣式表:
.my-component { background: #fff; border: 1px solid #ddd; padding: 10px; } .my-component p { color: #333; font-size: 16px; }
在上面的代碼中,我們首先定義了 .my-component 樣式類,它為組件設置了背景、邊框和填充。然后,我們定義了 .my-component p 樣式類,它為組件中的段落設置了字體顏色和大小。
值得注意的是,我們在樣式表中使用了 .my-component 類選擇器和后代選擇器 p。這些選擇器將樣式應用于組件及其子元素。
通過上述方法,我們已經成功地在組件上添加了樣式。我們可以繼續添加更多的樣式,以使組件的外觀更加漂亮。