ReactJS - 樣式

上一頁
下一頁

一般來說，React 允許透過 className 屬性使用 CSS 類來為元件設定樣式。由於 React JSX 支援 JavaScript 表示式，因此可以使用許多常見的 CSS 方法。一些頂級選項如下：

  • CSS 樣式表 - 常規 CSS 樣式以及 className

  • 內聯樣式 - 作為 JavaScript 物件的 CSS 樣式以及 camelCase 屬性。

  • CSS Modules - 區域性作用域的 CSS 樣式。

  • Styled Components - 元件級別的樣式。

  • Sass 樣式表 - 透過在構建時將樣式轉換為常規 css 來支援基於 Sass 的 CSS 樣式。

  • 後處理樣式表 - 透過在構建時將樣式轉換為常規 css 來支援後處理樣式。

讓我們在本節學習如何應用三種重要的樣式方法來設定元件的樣式。

  • CSS 樣式表

  • 內聯樣式

  • CSS Modules

CSS 樣式表

CSS 樣式表 是一種常用、常見且經過時間考驗的方法。只需為元件建立一個 CSS 樣式表，並輸入該元件的所有樣式。然後，在元件中使用 className 來引用樣式。

讓我們為 ExpenseEntryItem 元件設定樣式。

在您喜歡的編輯器中開啟 expense-manager 應用程式。

接下來，開啟 ExpenseEntryItem.css 檔案並新增一些樣式。

div.itemStyle { 
   color: brown; 
   font-size: 14px; 
}

接下來，開啟 ExpenseEntryItem.js 並將 className 新增到主容器。

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className="itemStyle">
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

接下來，使用 npm 命令啟動應用程式。

npm start

接下來，開啟瀏覽器並在位址列中輸入 https://:3000 並按回車鍵。

CSS Stylesheet

CSS 樣式表易於理解和使用。但是，當專案規模增大時，CSS 樣式也會增多，最終會在類名中造成許多衝突。此外，直接載入 CSS 檔案僅在 Webpack 捆綁器中受支援，在其他工具中可能不受支援。

內聯樣式

內聯樣式 是設定 React 元件樣式最安全的方法之一。它使用基於 DOM 的 css 屬性將所有樣式宣告為 JavaScript 物件，並透過 style 屬性將其設定為元件。

讓我們在我們的元件中新增內聯樣式。

在您喜歡的編輯器中開啟 expense-manager 應用程式，並修改 src 資料夾中的 ExpenseEntryItem.js 檔案。宣告一個物件型別的變數並設定樣式。

itemStyle = {
   color: 'brown', 
   fontSize: '14px' 
}

這裡，fontSize 代表 css 屬性 font-size。所有 css 屬性都可以透過以 camelCase 格式表示來使用。

接下來，使用花括號 {} 在元件中設定 itemStyle 樣式：

render() {
   return (
      <div style={ this.itemStyle }>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

此外，樣式可以直接在元件內部設定：

render() {
   return (
      <div style={
         {
            color: 'brown',
            fontSize: '14px'
         }         
      }>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

現在，我們已成功在我們的應用程式中使用了內聯樣式。

接下來，使用 npm 命令啟動應用程式。

npm start

接下來，開啟瀏覽器並在位址列中輸入 https://:3000 並按回車鍵。

Inline Styling

CSS Modules

CSS Modules 提供了最安全也是最簡單的定義樣式的方法。它使用帶有常規語法的常規 css 樣式表。在匯入樣式時，CSS Modules 會將所有樣式轉換為區域性作用域樣式，這樣就不會發生名稱衝突。讓我們更改我們的元件以使用 CSS Modules

在您喜歡的編輯器中開啟 expense-manager 應用程式。

接下來，在 src/components 資料夾下建立一個新的樣式表 ExpenseEntryItem.module.css 檔案，並編寫常規 css 樣式。

div.itemStyle {
   color: 'brown'; 
   font-size: 14px; 
}

這裡，檔案命名約定非常重要。React 工具鏈將透過 CSS Module 預處理以 .module.css 結尾的 css 檔案。否則，它將被視為常規樣式表。

接下來，開啟 src/component 資料夾中的 ExpenseEntryItem.js 檔案並匯入樣式。

import styles from './ExpenseEntryItem.module.css'

接下來，在元件中將樣式用作 JavaScript 表示式。

<div className={styles.itemStyle}>

現在，我們已成功在我們的應用程式中使用了 CSS Modules。

最終完整的程式碼是：

import React from 'react';
import './ExpenseEntryItem.css';
import styles from './ExpenseEntryItem.module.css'

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className={styles.itemStyle} >
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

接下來，使用 npm 命令啟動應用程式。

npm start

接下來，開啟瀏覽器並在位址列中輸入 https://:3000 並按回車鍵。

CSS Modules
列印頁面
上一頁
下一頁
廣告