React 中的內聯樣式

React 是一個基於 JavaScript 的庫，可以在我們的 Web 應用程式中建立可重用的元件。我們可以自定義元件的功能和視覺外觀。

我們可以使用這些元件作為構建塊來構建強大、功能強大的 Web 應用程式。

React 應用程式是用 JSX 編寫的，這是一種類似於 HTML 的模板語言，但允許 Web 開發人員在標記結構中使用 JavaScript。JSX 在許多方面與 HTML 類似，但存在細微差別。

與 HTML 一樣，你可以在 JSX 中編寫內聯樣式，但有一個很大的區別：樣式必須表示為一個物件，而不是一個簡單的字串。

本文將探討在 React 中應用內聯樣式的不同方法。

React 中的內聯樣式

Web 開發人員尚未確定哪種方式是在 React 中設定元件樣式的最佳方式。有些人喜歡使用像 SCSS 這樣的前處理器，有些人喜歡堅持使用常規 CSS，但即使在這個陣營中也存在差異。

一些 React 開發人員喜歡將所有樣式儲存在一個 CSS 檔案中，而另一些開發人員則希望為每個元件使用單獨的樣式表。使用外部樣式表的缺點是很有可能你最終會用完唯一的描述性類名稱。

幸運的是，你可以將內聯樣式直接應用於元件，因此無需為它們建立單獨的類名。內聯樣式也解決了簡單的問題。

React 開發人員不必檢視長樣式表來使用內聯樣式更改元素的樣式。使用內聯樣式，CSS 和 JavaScript 是相互關聯的。

React 中內聯樣式的使用

正如我們之前提到的，要在 JSX 中應用內聯樣式，它們必須寫成一個物件。如果你將 JavaScript 物件（或任何 JavaScript 表示式）作為值傳遞給 style 屬性，則它必須用花括號括起來。

開啟和關閉花括號也用於定義物件，所以如果你看一下 React 中內聯樣式的簡單定義，它看起來像雙花括號：

export default function App() {
    return (
        <div>
            <h1 style={{color: "red"}}>Hello CodeSandbox</h1>
        </div>
    );
}

在 React 中為內聯樣式新增條件

然而，包裹在 style 物件上的花括號 {} 允許我們做的不僅僅是傳遞一個 JavaScript 物件。我們還可以使用三元運算來根據狀態值應用樣式並允許使用者更改該值。

最簡單的例子是開啟/關閉夜間模式。我們來看一個例子：

import { useState } from "react";
export default function App() {
    const [nightmode, setNightMode] = useState(false);
    return (
        <div
            style={{
                backgroundColor: nightmode ? "black" : "white",
                color: nightmode ? "white" : "black"
            }}
            >
            <h1>Hello, Dear Users</h1>
            <input
                type="checkbox"
                name="nightmode"
                onChange={() => setNightMode(!nightmode)}
            />{" "}
            Turn on night mode
        </div>
    );
}

你可以在 CodeSandbox 上檢視演示，看看它是如何工作的。

這是一個簡單的應用程式，帶有一個帶有文字的 div 和一個核取方塊。選中和取消選中核取方塊會使應用程式在夜間模式和燈光模式之間來回切換。

我們首先匯入 useState() 掛鉤，這對於根據使用者輸入更新狀態值至關重要。然後我們建立兩個變數：nightmode 和 setNightMode。

前者將儲存狀態變數本身，而後者將通過 useState 鉤子分配一個更新函式。最後，我們將狀態變數的預設值設定為 false。

然後，我們得到 div 元素的 style 物件，它有兩個屬性：backgroundColor 和 color。

在我們繼續之前，請注意 CSS 屬性的傳統名稱是 background-color，但在 JavaScript 中，兩個詞被壓在一起，並且是駝峰式的。這是在 React 中編寫內聯樣式的約定。

這些屬性的值是三元運算子。兩者都檢查 nightmode 變數的值。

如果為真，則 backgroundColor 採用 black 的值；否則，該值將是白色。由於我們將狀態值設定為 false，因此預設情況下背景顏色為白色。

然後我們有 color 屬性，它設定值使它們與背景相反，以確保文字和背景顏色具有高度的對比度。

每次使用者勾選和取消勾選核取方塊時，onChange 事件處理程式都會翻轉狀態值。有了這個，我們有一個簡單的例子來說明如何使用內聯樣式有條件地改變元素的外觀。

物件引用作為 React 中的內聯樣式

在這種情況下，我們的 style 物件相對簡單，並且不會影響程式碼的可讀性。然而，想象一下如果我們有幾十種 div 元素的樣式。

如果你寫出所有樣式，則程式碼將佔用比所有其他元素更多的空間。在這種情況下，將物件移到 return 語句之外並引用它是明智的。

基於上面的示例，程式碼將如下所示：

import { useState } from "react";
export default function App() {
    const [nightmode, setNightMode] = useState(false);
    const divStyle = {
        backgroundColor: nightmode ? "black" : "white",
        color: nightmode ? "white" : "black"
    }
    return (
        <div
            style={divStyle}
            >
            <h1>Hello, Dear Users</h1>
            <input
                type="checkbox"
                name="nightmode"
                onChange={() => setNightMode(!nightmode)}
            />{" "}
            Turn on night mode
        </div>
    );
}

這樣，JSX 程式碼看起來就不那麼混亂了。