reactJS -- 13 JSX樣式與CSS的互轉

一.CSS 格式轉化爲React中的CSS樣式

1. css樣式 

.miniFooter{
  background-color: #333;
  color: #fdd;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}

2.React中CSS格式

const styleComponentHeader = {
      header: {
        backgroundColor: "#333",
        color: "#fff",
        "padding-top": "15px",  //css原生 不推動
        paddingBottom: "15px"
      },
      //定義其餘樣式
    };

手機端開發只能將樣式寫在裏面

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class ComponentHeader extends React.Component{

  render(){   //解析類的輸出

    const styleComponentHeader = {
      header: {
        backgroundColor: "#333",
        color: "#fff",
        "padding-top": "15px",  //css原生 不推動
        paddingBottom: "15px"
      },
      //定義其餘樣式
    };

    return (
      <header style = {styleComponentHeader.header}>
        <h1>這裏是頭部</h1>
      </header>
    )
  }
}

3.在線轉換工具

在線轉換工具： http://Yeea1//deRi^R_RUe.To^/9ddHoFeRTe/

把CSS 轉化爲 react 中形式