eact 是一個(gè)流行的用于構(gòu)建用戶界面的 JavaScript 庫(kù)。隨著越來(lái)越多的 JavaScript 框架跳轉(zhuǎn)到 React，內(nèi)聯(lián)樣式語(yǔ)法也變得流行起來(lái)。內(nèi)聯(lián)樣式允許你輕松地在組件上創(chuàng)建類似 CSS 的簡(jiǎn)單樣式，而無(wú)需使用單獨(dú)的樣式表。這使團(tuán)隊(duì)中的開(kāi)發(fā)人員和設(shè)計(jì)人員可以輕松地更無(wú)縫地共享和更新樣式。

內(nèi)聯(lián)樣式是一種將樣式屬性添加到 HTML 元素的方法，方法是在標(biāo)簽旁邊編寫(xiě)樣式屬性。內(nèi)聯(lián)樣式允許你在 JavaScript 組件中添加 CSS 規(guī)則，這可以使樣式更改更容易和更方便地實(shí)現(xiàn)。

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

內(nèi)聯(lián) CSS

JS 中的 CSS

樣式化的組件

CSS 模塊等

React 應(yīng)用程序中的內(nèi)聯(lián)樣式

現(xiàn)代網(wǎng)絡(luò)不僅僅是一堆文本和圖像，它具有互動(dòng)性和吸引力。現(xiàn)在，內(nèi)聯(lián)樣式可以幫助你創(chuàng)建這些交互并以新的方式與你的訪問(wèn)者互動(dòng)！

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

這意味著添加 HTML 元素的順序無(wú)關(guān)緊要，內(nèi)聯(lián)樣式表總是首先呈現(xiàn)。當(dāng)你想要向元素添加少量屬性，或者想要在不更改原始樣式表的情況下覆蓋頁(yè)面上的現(xiàn)有樣式時(shí)，內(nèi)聯(lián)樣式很有用。

內(nèi)聯(lián) CSS 允許你一次將獨(dú)特的樣式應(yīng)用于一個(gè) HTML 元素。通過(guò)使用 style 屬性和其中定義的任何 CSS 屬性，你可以將 CSS 分配給特定的 HTML 元素。

style 屬性為元素指定內(nèi)聯(lián)樣式并覆蓋全局設(shè)置的任何樣式，因?yàn)樗哂凶罡叩奶禺愋浴?/span>

了解更多

React 中設(shè)置內(nèi)聯(lián)樣式：

• 將元素上的樣式屬性設(shè)置為對(duì)象。
• 設(shè)置特定的 CSS 屬性和值來(lái)設(shè)置元素的樣式。
• 例如，<div style={{backgroundColor: 'salmon', color: 'white'}}>。

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

  const elementWidth=150;

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

      <br />

      {/* ? 使用對(duì)象變量設(shè)置內(nèi)聯(lián)樣式 */}
      <div style={stylesObj}>跡憶客</div>

      <br />

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

      <br />

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

export default App;

代碼示例展示了在 React.js 中的元素上設(shè)置內(nèi)聯(lián)樣式的多種方法。

第一個(gè)示例直接在元素上設(shè)置樣式。

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

請(qǐng)注意，在樣式對(duì)象上設(shè)置時(shí)，像 background-color 這樣的多詞屬性是駝峰式的。

style 屬性的值包含在 2 組花括號(hào)中。

內(nèi)聯(lián)樣式中的第一組花括號(hào)標(biāo)記表達(dá)式的開(kāi)始，第二組花括號(hào)是包含樣式和值的對(duì)象。

第二個(gè)示例將樣式對(duì)象提取到變量中。

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

  return (
    <div>
      {/* ? 使用對(duì)象變量設(shè)置內(nèi)聯(lián)樣式 */}
      <div style={stylesObj}>跡憶客</div>
    </div>
  );
};

export default App;

當(dāng)我們有多個(gè)共享相同樣式的元素時(shí)，您可以使用此方法。

我們還可以使用三元運(yùn)算符有條件地在 React 中設(shè)置內(nèi)聯(lián)樣式。

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

三元運(yùn)算符與 if/else 語(yǔ)句非常相似。

問(wèn)號(hào)之前的部分被評(píng)估，如果它返回一個(gè)真值，則運(yùn)算符返回冒號(hào)之前的值，否則返回冒號(hào)之后的值。

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

在設(shè)置內(nèi)聯(lián)樣式時(shí)，我們還可以使用字符串插入表達(dá)式或變量。

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

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

export default App;

在設(shè)置樣式時(shí)，我們使用模板文字來(lái)連接字符串和變量。

div 元素的 width 屬性設(shè)置為 150px。

美元符號(hào)和花括號(hào)語(yǔ)法允許我們使用被評(píng)估的占位符。

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

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

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

export default App;

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

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

在 React 中編寫(xiě)內(nèi)聯(lián)樣式的另一種方法是將樣式寫(xiě)入擴(kuò)展名為 .css 的文件中。

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

.text-white {
  color: white;
}

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

下面是我們?nèi)绾螌?dǎo)入和使用這些類。

// ? 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 中導(dǎo)入全局 CSS 文件時(shí)，最好將 CSS 文件導(dǎo)入 index.js 文件。

index.js 文件是你的 React 應(yīng)用程序的入口點(diǎn)，所以它總是會(huì)被運(yùn)行。

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