Day07 React之CSS样式设定

在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，不同样式字段之间用逗号隔开而不是分号。