資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究React.js 中的樣式
React.js 中的樣式可以透過以下兩種方式實現
- css 樣式表
- 內聯樣式
讓我們先看看 CSS 樣式表
我們有如下所示的 App.js 檔案：
import React, {Component} from 'react';
import './App.css';
class App extends Component {
render(){
return (
<div className="App">
<p className="myColoredText">Styling React Components</p>
</div>
);
}
}
export default App;在 App.js 檔案中，我們匯入了包含 css 類 myColoredText 的 App.css 檔案。
請注意
- 我們在雙引號中使用了 css 類的名稱，並使用 className 屬性。
- JSX 使用駝峰命名法在 html 元素上編寫屬性。
我們的 App.css 如下所示：
.myColoredText{
color:blue;
background:yellow;
margin:auto;
width:20%;
padding:20px;
}使用上述方法編寫 css 類的問題是，一旦 webpack 構建最終的 css 檔案，css 類就會變成全域性的。
然後，css 類可能會被其他具有相同 css 類的 css 檔案覆蓋。
避免 CSS 類變成全域性的解決方案
使用 css 模組 可以防止這種情況發生。css 檔名應以 module.css 副檔名結尾。
此解決方案在工作流程中建立唯一的 css 類，從而防止它們被覆蓋。
css 類將變為 fileName_cssClassName__hashValue
根據此邏輯，上面使用的 App.css 檔案應重新命名為 App.module.css。
我們可以在應用程式中同時使用全域性和 module.css 檔案。
對於通用 css，我們可以建立一個不使用 module.css 副檔名的全域性 css 檔案。
讓我們看看 React 元件的內聯樣式
內聯樣式使用 JavaScript 物件（鍵值屬性）建立。
示例
import React, {Component} from 'react';
import './App.css';
class App extends Component {
render(){
let myInlineStyle={
boxShadow:'0 2px 3px #ccc',
border:'2px solid blue',
marginTop:'50px'
}
return (
<div className="App">
<p className="myColoredText" style={myInlineStyle}>Styling React Components</p>
</div>
);
}
}
export default App;內聯樣式也存在一個問題。對於使用滑鼠懸停元素，需要 radium 等第三方庫。
我們可以如下安裝 radium：
on the application directory, run the following command npm install --save radium
在 jsx 檔案中新增 radium。
add import for radium import Radium from 'radium';
安裝完成後，在內聯樣式物件中新增懸停物件，如下所示：
let myInlineStyle={
boxShadow:'0 2px 3px #ccc',
border:'2px solid blue',
marginTop:'50px',
':hover':{
background:'white'
}
}使用 radium 後，App.js 檔案如下所示：
import React, {Component} from 'react';
import './App.css';
import Radium from 'radium';
class App extends Component {
render(){
let myInlineStyle={
boxShadow:'0 2px 3px #ccc',
border:'2px solid blue',
marginTop:'50px',
':hover':{
background:'white'
}
}
return (
<div className="App">
<p className="myColoredText" style={myInlineStyle}>Styling React Components</p>
</div>
);
}
}
export default Radium(App);重要的是，我們必須像下面這樣將元件包裝或匯出到 Radium 中：
export default Radium(App);
現在，懸停時會將背景顯示為白色。這樣我們就可以處理內聯樣式了。它基本上是一個 JavaScript 物件。
更新於： 2019年9月4日
532 次檢視
廣告