React樣式

學習目標

• 瞭解如何引入樣式

實例一 （加載樣式）

import React from 'react';
import ReactDOM from 'react-dom';

let exampleStyle = {
  background: "skyblue",
  borderBottom: "4px solid red"
}

let element = (
  <div>
    <h1 style={exampleStyle}>hello world.</h1>
  </div>
)

ReactDOM.render(
  element,
  document.querySelector('#root')
)

實例二 （樣式並連）

import React from 'react';
import ReactDOM from 'react-dom';
let classStr = "redBg"
let element = (
  <div>
    <h1 className={"abc " + classStr}>hello world.</h1>
  </div>
)
ReactDOM.render(
  element,
  document.querySelector('#root')
)

實例三 （引入css文件）

import React from 'react';
import ReactDOM from 'react-dom';
import './test.css'
let classStr2 = ['abc2', 'redBg'].join(" ");
let element2 = (
  <div>
    <h1 className={classStr2}>hello world.</h1>
  </div>
)
ReactDOM.render(
  element2,
  document.querySelector('#root')
)

test.css

.abc2 {
    background-color: purple;
}
.redBg {
    font-size: 16px;
    font-weight: 700;
}

實例四 （註釋）

let element2 = (
  <div>
    <!-- comment --> #錯誤註釋
    // comment ...  #錯誤註釋
    /* comment */ #正確註釋
    <h1 className={classStr2}>hello world.</h1>
  </div>
)

註釋只能放在/* */裏面

React樣式小結

• class中不能存在多個class屬性

#錯誤表示

<div class='abc' class='edf' />

• style樣式中，如果存在多個單詞組合，第二個單詞開始，首字母大寫（駝峯命名法）。或者用引號引起來，否則會報錯。

• 多個類共存（2種方式）

• 註釋（在表達式內書寫）