reactJS -- 13 JSX样式与CSS的互转

最新推荐文章于 2022-10-09 00:00:00 发布

weixin_34245169

最新推荐文章于 2022-10-09 00:00:00 发布

阅读量318

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2991733/blog/1154335

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.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>
    )
  }
}