React 應用程序中的內聯樣式完整指南

eact 是一個流行的用于構建用戶界面的 JavaScript 庫。隨著越來越多的 JavaScript 框架跳轉到 React，內聯樣式語法也變得流行起來。內聯樣式允許你輕松地在組件上創建類似 CSS 的簡單樣式，而無需使用單獨的樣式表。這使團隊中的開發人員和設計人員可以輕松地更無縫地共享和更新樣式。

內聯樣式是一種將樣式屬性添加到 HTML 元素的方法，方法是在標簽旁邊編寫樣式屬性。內聯樣式允許你在 JavaScript 組件中添加 CSS 規則，這可以使樣式更改更容易和更方便地實現。

在 react 中有許多不同的樣式組件方式，包括：

內聯 CSS

JS 中的 CSS

樣式化的組件

CSS 模塊等

React 應用程序中的內聯樣式

現代網絡不僅僅是一堆文本和圖像，它具有互動性和吸引力。現在，內聯樣式可以幫助你創建這些交互并以新的方式與你的訪問者互動！

內聯樣式是一種使用樣式屬性將樣式信息添加到 HTML 文檔的方法。style 屬性可以添加到任何 HTML 元素中，并將在文檔頭部中的內聯樣式表中呈現樣式，然后再在文檔中的任何其他內容之前呈現樣式。

這意味著添加 HTML 元素的順序無關緊要，內聯樣式表總是首先呈現。當你想要向元素添加少量屬性，或者想要在不更改原始樣式表的情況下覆蓋頁面上的現有樣式時，內聯樣式很有用。

內聯 CSS 允許你一次將獨特的樣式應用于一個 HTML 元素。通過使用 style 屬性和其中定義的任何 CSS 屬性，你可以將 CSS 分配給特定的 HTML 元素。

style 屬性為元素指定內聯樣式并覆蓋全局設置的任何樣式，因為它具有最高的特異性。

了解更多

SS簡介

CSS (Cascading Style Sheets) 層疊樣式表。

CSS能做些什么？

1.使用CSS樣式可以有效地對頁面進行布局。

2.使用CSS樣式可以對頁面字體、顏色、背景和其他效果實現精確描述，同時對它們的修改和控制變得更加快捷。

3.可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的代碼，那么整個站點的所有頁面都會隨之發生變動。

4.CSS可以支持多種設備,比如手機,PDA,打印機,電視機,游戲機等

5.將表現與結構分離。

CSS 語法由三部分構成：選擇符、屬性和值

屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

Selector {Property:Value;}

Selector 選擇符；Property 屬性；Value 值

例如：body { background-color:#cccccc;}

將CSS應用到網頁中

1.內聯樣式表

指將CSS樣式編碼寫在HTML或XHTML標簽之中。

如：

<h1 style="font-size:12px; color:#ff0000;">這是一個標題</h1>

2.內部樣式表

內部樣式表作為頁面中的一個單獨部分，由<style></style>標簽定位在<head></head>之中。

如：

<head>

body {background-color:#cccccc;}

</style>

</head>

說明：其中type="text/css"其實可以不用寫的，因為現在瀏覽器默認就是它的。

3.外部樣式表

外部樣式表是CSS應用中最好的一種形式，它將CSS樣式代碼單獨放在一個外部文件中，再由網頁進行調用。

如：

在style.css樣式文件里寫上如下：

body { background-color:#cccccc;}

在html文件“<head>”標簽中如下：

<head>

</head>

說明：href中的地址是指網站根目錄下放置名為style.css的樣式文件。

CSS選擇符

1.類型選擇符

所謂類型選擇符，指以網頁中已有的標簽名作為名稱的選擇符。

如：body{} h1{} p{}

2.群組選擇符

除了可以對單個標簽進行樣式指定外，還可以對一組標簽進行相同的樣式定義。

如：

h1,h2, h3, p {font-size:12px;font-family:arial;}

使用逗號對選擇符進行分隔。對頁面中需要使用相同樣式的地方，只需寫一次樣式。

3.包含選擇符

當我們只打算對某個對象的子對象進行樣式定義時，可以使用包含選擇符。

如：

h1 span {font-weight:bold;} span: 它是做內容的補充。

4.id 及 class 選擇符

id 及 class 均是css 提供由用戶自定義標簽名稱的選擇符，用戶可以使用選擇符id及class 來對頁面中的xhtml標簽進行自定義名稱，從而達到擴展xhtml標簽及組合html標簽的目的。

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

如：id 選擇符

<p id="p1"> 這是一個段落 </p>

#p1{font-size:12px;font-weight:bold;}

如：class 選擇符

<p class="p1"> 這是一個段落 </p>

.p1{font-size:12px;font-weight:bold;}

注意：在網頁中，每個id名稱中只能使用一次，不得重復。與id 不同，class 允許重復使用。比如頁面中的多個元素，都可以使用同一個樣式定義。

5.組合選擇符

如：

h1 .p1 {}表示h1標簽下的所有class為p1的標簽。

#content h1 {}表示id為content的標簽下的所有h1標簽。

6.偽類選擇符

偽類可以看做是一種特殊的類選擇符，是非常常用的選擇符之一，是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。

a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */

a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */

a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */

* 一定要按照a:link， a:visited， a:hover， a:active的順序書寫。

6.通配選擇符 *

* 號表示所有的對象，所謂通配選擇符，就是指可以使用模糊指定的方式來對對象進行選擇，指定樣式。

如：

*{color:blue;margin:0;padding:0;}

React 中設置內聯樣式：

將元素上的樣式屬性設置為對象。
設置特定的 CSS 屬性和值來設置元素的樣式。
例如，<div style={{backgroundColor: 'salmon', color: 'white'}}>。

const App=()=> {
  const stylesObj={
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth=150;

  return (
    <div>
      {/* ? 直接設置內聯樣式 */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        跡憶客
      </div>

      <br />

      {/* ? 使用對象變量設置內聯樣式 */}
      <div style={stylesObj}>跡憶客</div>

      <br />

      {/* ? 使用三元有條件地設置內聯樣式 */}
      <div
        style={{
          backgroundColor: 'hi'.length===2 ? 'violet' : 'mediumblue',
          color: 'hi'.length===2 ? 'white' : 'mediumpurple',
        }}
      >
        跡憶客
      </div>

      <br />

      {/* ? 設置內聯樣式將變量插入字符串 */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        跡憶客
      </div>
    </div>
  );
};

export default App;

代碼示例展示了在 React.js 中的元素上設置內聯樣式的多種方法。

第一個示例直接在元素上設置樣式。

<div style={{backgroundColor: 'salmon', color: 'white'}}>
  跡憶客
</div>

請注意，在樣式對象上設置時，像 background-color 這樣的多詞屬性是駝峰式的。

style 屬性的值包含在 2 組花括號中。

內聯樣式中的第一組花括號標記表達式的開始，第二組花括號是包含樣式和值的對象。

第二個示例將樣式對象提取到變量中。

const App=()=> {
  const stylesObj={
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    <div>
      {/* ? 使用對象變量設置內聯樣式 */}
      <div style={stylesObj}>跡憶客</div>
    </div>
  );
};

export default App;

當我們有多個共享相同樣式的元素時，您可以使用此方法。

我們還可以使用三元運算符有條件地在 React 中設置內聯樣式。

<div
  style={{
    backgroundColor: 'hi'.length===2 ? 'violet' : 'mediumblue',
    color: 'hi'.length===2 ? 'white' : 'mediumpurple',
  }}
>
  跡憶客
</div>

三元運算符與 if/else 語句非常相似。

問號之前的部分被評估，如果它返回一個真值，則運算符返回冒號之前的值，否則返回冒號之后的值。

示例中的三元運算符檢查字符串 hi 的長度是否等于 2，如果是，則為 backgroundColor 屬性返回字符串紫羅蘭色，否則返回 mediumblue。

在設置內聯樣式時，我們還可以使用字符串插入表達式或變量。

const App=()=> {
  const elementWidth=150;

  return (
    <div>
      {/* ? 設置內聯樣式將變量插入字符串 */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        跡憶客
      </div>
    </div>
  );
};

export default App;

在設置樣式時，我們使用模板文字來連接字符串和變量。

div 元素的 width 屬性設置為 150px。

美元符號和花括號語法允許我們使用被評估的占位符。

React 中常用的模式是提取具有預定義樣式的包裝器組件，這些樣式呈現其子屬性。

function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App=()=> {
  return (
    <div>
      <p>
        Hello <BoldText>World</BoldText>
      </p>
    </div>
  );
};

export default App;

這是一個非常簡單的例子，但是 BoldText 組件在元素上設置了一些樣式并渲染了它的 children 屬性。

這種方法通常用于定義具有通常重用樣式的包裝器組件。

在 React 中編寫內聯樣式的另一種方法是將樣式寫入擴展名為 .css 的文件中。

.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

.font-lg {
  font-size: 2rem;
  padding: 10px 10px;
}

下面是我們如何導入和使用這些類。

// ? import css file
import './App.css';

const App=()=> {
  return (
    <div>
      <p className="bg-salmon text-white font-lg">hello world</p>
    </div>
  );
};

export default App;

在 React 中導入全局 CSS 文件時，最好將 CSS 文件導入 index.js 文件。

index.js 文件是你的 React 應用程序的入口點，所以它總是會被運行。

另一方面，如果我們將 CSS 文件導入組件，則在卸載組件后，CSS 樣式可能會被刪除。

在線咨詢

上一篇：「社招」友轉需！這家文化傳媒國企200萬年薪公開誠聘
下一篇：HTML+CSS：三種css的引入方式，內鏈式、嵌入

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

React 應用程序中的內聯樣式完整指南

您的項目需求