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 中形式