如何使用CSS設置React應用程序的樣式
使用React,您可以通過多種方式向組件添加樣式。
使用類和CSS
首先也是最簡單的方法是使用類,並使用普通的CSS文件將這些類作為目標:
const Button = () => {
return <button className="button">A button</button>
}
.button {
background-color: yellow;
}
您可以使用import語句導入樣式表,如下所示:
import './style.css'
和Webpack將負責將CSS屬性添加到捆綁包中。
使用樣式屬性
第二種方法是使用style
附加到JSX元素的屬性。使用這種方法,您不需要單獨的CSS文件。
const Button = () => {
return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}
CSS的定義現在略有不同。首先,請注意雙大括號:這是因為style
接受一個對象。我們傳入一個用花括號定義的JavaScript對象。我們也可以這樣做:
const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
return <button style={buttonStyle}>A button</button>
}
使用時create-react-app
,由於使用了這些樣式,因此這些樣式默認情況下會自動添加前綴自動前綴。
另外,樣式現在是駝峰式的,而不是使用破折號。每當CSS屬性帶有破折號時,請將其刪除,然後將下一個單詞大寫。
樣式的好處是對於組件來說是本地的,並且不會洩漏到應用程序其他部分的其他組件,這是使用類和外部CSS文件無法提供的。
使用CSS模塊
CSS模塊似乎是中間的一個完美選擇:您使用類,但是CSS限於組件的範圍,這意味著您添加的任何樣式都無法在未經您許可的情況下應用於其他組件。但是,您的樣式是在單獨的CSS文件中定義的,它比JavaScript中的CSS易於維護(並且您可以使用舊的CSS屬性名)。
首先創建一個以結尾的CSS文件.module.css
, 例如Button.module.css
。最好的選擇是給它與要樣式化的組件相同的名稱
在此處添加CSS,然後將其導入要設置樣式的組件文件中:
import style from './Button.module.css'
現在您可以在JSX中使用它:
const Button = () => {
return <button className={style.content}>A button</button>
}
而已!在生成的標記中,React將為每個渲染的組件生成一個特定的唯一類,並將CSS分配給該類,以使CSS不會影響其他標記。
免費下載我的反應手冊
更多反應教程:
- 一個React簡單的應用示例:通過API獲取GitHub用戶信息
- 用React構建一個簡單的計數器
- 用於React開發的VS Code設置
- 如何通過React Router將道具傳遞給子組件
- 使用Electron和React創建一個應用
- 教程:使用React創建電子表格
- 學習React的路線圖
- 了解如何使用Redux
- JSX入門
- 樣式化的組件
- Redux Saga簡介
- React Router簡介
- React簡介
- 反應組件
- 虛擬DOM
- 反應事件
- 反應狀態
- 反應道具
- 反應片段
- React Context API
- 反應PropTypes
- 反應概念:聲明式
- React:如何在點擊時顯示其他組件
- 如何在React JSX內部循環
- 道具與狀態在React中
- 您應該使用jQuery還是React?
- 使用React需要知道多少JavaScript?
- 蓋茨比介紹
- 如何在React中引用DOM元素
- React中的單向數據流
- 反應高階組件
- 反應生命週期事件
- 反應概念:不變性
- 反應概念:純度
- React鉤子簡介
- create-react-app簡介
- 反應概念:組成
- React:演示組件與容器組件
- React中的代碼拆分
- 使用React進行服務器端渲染
- 如何安裝React
- React中的CSS
- 在React中使用SASS
- 在React中處理表單
- 反應嚴格模式
- 反應門戶
- 反應渲染道具
- 測試React組件
- 如何在React中將參數傳遞給事件處理程序
- 如何處理React中的錯誤
- 如何在JSX中返回多個元素
- React中的條件渲染
- 反應,如何將道具轉移到子組件
- 如何在React中獲取輸入元素的值
- 如何使用useState React鉤子
- 如何使用useCallback React鉤子
- 如何使用useEffect React鉤子
- 如何使用useMemo React鉤子
- 如何使用useRef React鉤子
- 如何使用useContext React鉤子
- 如何使用useReducer React鉤子
- 如何將您的React應用程序連接到相同來源的後端
- 到達路由器教程
- 如何使用React Developer Tools
- 如何學習React
- 如何調試React應用程序
- 如何在React中呈現HTML
- 如何修復`dangerouslySetInnerHTML`與React中的錯誤不匹配
- 我如何解決React登錄表單狀態和瀏覽器自動填充的問題
- 如何在本地主機上的React應用程序中配置HTTPS
- 如何修復React中的“在渲染其他組件時無法更新組件”錯誤
- 我可以在條件內使用React掛鉤嗎?
- 將useState與對像一起使用:如何更新
- 如何使用React和Tailwind在代碼塊中移動
- React,添加到DOM時將焦點放在React中的一個項目上
- 反應,在doubleclick上編輯文本