在React中加入CSS樣式分爲3種方式：

1.External css (外部樣式)

外部樣式是使用import匯入外部css檔案即可。

import './index.css';

2.internal css(內部樣式)

先建立style樣式物件，然後在render函數的元件中使用「style={物件}」,語句參照如下:

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

const header = {
    color : '#FF7878',
    textTransform :'capitalize',
    textAlign : 'center',
    fontWeight : 'bold',
    fontFamily : 'sans-serif',
}

ReactDOM.render(
    <>
      <h1 style = {header}>This is  internal css </h1>      
    </>,
    document.getElementById('root')
  );

注意建立style樣式物件採用駝峰命名法(如font-size →fontSize)，然後在render函數的元件中使用「style={物件}」，使用的時候只需要一個大括號{}

3.inline css（行內樣式）

行內樣式直接在標籤內部聲明樣式，行內樣式可用於為單個元素應用獨特的樣式。
使用「style={{樣式程式碼}}」在元件內部定義css樣式,語句參照如下:

<h1 style = {{ color :'red', fontSize :'16px' ,textTransform : 'capitalize'}}>This is inline css</h1>

使用「style={{樣式程式碼}}」在元件內部定義css樣式

style=後面跟着的是兩對大括號，與原本的style=" color:red; font-size:16px "不同。樣式名稱的命名方式採用駝峰命名方式，由本來的 font-size 變成了 fontSize，不同樣式字段之間用逗號隔開而不是分號。

remove underline from links

react link text decoration none

<Link to="/about" style={{ textDecoration: 'none' }}>About us</Link>
<Link to="page1" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Page 1</MenuItem>
</Link>