ReactJS - 內聯樣式

React 提供了一種獨特的方式，可以直接在 React 元件中編寫 CSS 並將其用於 JSX 中。這個概念稱為 JS 中的 CSS，它比傳統樣式用法具有許多優勢。

讓我們學習什麼是內聯樣式以及如何在 React 元件中使用它。

內聯樣式的概念

CSS 使開發人員能夠設計 Web 應用程式的 UI。React 為 CSS 提供了第一類支援，並允許 CSS 直接匯入到 React 應用程式中。將 CSS 直接匯入 React 元件就像匯入一個包一樣簡單。

import './App.css'

但是，將 CSS 直接匯入 Web 元件有一個主要缺點，即 全域性名稱空間。如果類名衝突，全域性樣式可能會影響單個元件的樣式。開發人員需要注意為類名分配一些字首，以確保不會發生衝突。

另一種方法是允許 Javascript 管理 CSS，這稱為 JS 中的 CSS。React 允許透過特殊的 CSS 語法在 JSX 中使用 CSS。React 為每個元件提供了一個 style 屬性，可用於指定內聯樣式。內聯樣式應以 Javascript 物件的形式提供。該物件應遵循以下規則：

物件的鍵應該是普通 CSS 屬性的駝峰式版本。例如，`background-color` 應指定為 `backgroundColor`。

{
   backgroundColor: "red"
}

物件的 value 應該是 CSS 中相應物件鍵的允許值之一，並且應該是字串格式。例如，`font-size` CSS 屬性及其值 (12px) 應如下指定：

{
   fontSize: "12px"
}

React 將處理衝突並正確渲染應用程式。

應用內聯樣式

在本節中，讓我們學習如何在 React 應用程式中應用內聯樣式。

首先，使用以下命令建立一個新的 React 應用程式並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，開啟 App.css (src/App.css) 並刪除所有 CSS 類。

// remove the css

接下來，建立一個簡單的元件，SimpleStyle (src/Components/SimpleIcon.js)，如下所示：

import React from "react";
class SimpleStyle extends React.Component {
   displayStyle = {
      fontFamily: 'Times New Roman',
      fontSize: "24px",
      color: "red"
   }
   render() {
      return (
         <div>
            <div style={this.displayStyle}>
               Sample text to understand inline style (object as variable) in React component
            </div>
            <hr />
            <div style={{ fontFamily: 'Arial', fontSize: "24px", color: "grey"}}>
               Sample text to understand inline style (object as expression) in React component
            </div>
         </div>
      )
   }
}
export default SimpleStyle

這裡我們有：

使用變數 (displayStyle) 對第一個 div 進行樣式設定。
使用表示式對第二個 div 進行樣式設定。

接下來，開啟 App 元件 (src/App.js) 並使用 SimpleStyle 元件更新內容，如下所示：

import './App.css'
import React from 'react';
import SimpleStyle from './Components/SimpleStyle'

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleStyle />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡我們有：

匯入了 SimpleStyle 元件。
使用 SimpleStyle 元件來渲染日曆圖示。

最後，在瀏覽器中開啟應用程式。內容將按如下所示呈現：

總結

內聯樣式幫助開發人員快速包含 CSS 樣式，而無需擔心 CSS 樣式衝突。此外，語法與 CSS 非常相似，這使得開發人員可以輕鬆使用該功能而無需太多學習曲線。

列印頁面