如何將 CSS 新增到 React 元件

您是否被如何讓您的組件採用那些令人驚嘆的樣式所困擾？不用擔心，在這裡我們將討論三種方法來幫助您實現美麗的設計。如果您在閱讀本文時對 CSS 和 Javascript 有一定的了解，那就太好了。讓我們潛入吧！

1. 使用 CSS 樣式表。

這涉及在單獨的文件中編寫您自己的 CSS 樣式，然後將其匯入到您的元件中。
請記住在命名檔案時使用 .css 副檔名。檢查下面的範例程式碼。

//你的 CSS 檔案

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//將 CSS 檔案匯入到您的元件中。
// 您可以為 CSS 檔案指定一個您選擇的名稱。

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. 使用 CSS 模組

也許你不喜歡第一種方法，或者它不適合你寫程式的方式。
您可以使用我們的第二種方法。在這裡，您還將創建一個單獨的文件，在其中編寫 CSS，但這次使用不同的擴展名； .module.css

// 你的 CSS 模組。
// mystyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//將模組匯入到您的元件中。

import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. 使用內聯樣式

可以使用style 屬性style='styles here' 來實現內聯樣式，但是，必須小心，因為style 屬性中作為值的任何內容都不是典型的CSS 選擇器，而是一個javascript 對象，因此，它應該採用物件的語法。

這就是我的意思；

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

注意雙花括號，也要注意用來寫 javascript 物件的鍵：值對語法。

需要記住的另一件事是，在編寫具有兩個名稱（例如背景顏色）的事物屬性時，需要使用駝峰式命名法背景顏色

提示：您可以使用所有樣式程式碼建立一個對象，並在 style 屬性中呼叫它。

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

注意沒有雙花括號。

我希望這對您有所幫助，並且您喜歡閱讀它。我歡迎回饋，以便我改進下一篇文章。謝謝你

以上是如何將 CSS 新增到 React 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！