react组件的样式编写

react组件样式的三种方式

var obj = {
            background: "yellow",
            fontSize:"30px"
 }
<div style={obj}>123123</div>
<div style={{ background: "yellow" }}>aaaaaa</div>
<div className="active">bbbbbb</div>

import React, { Component } from 'react'
import './css/01-index.css'
export default class App extends Component {
    render() {
        var myname = "huanhuan"
        var obj = {
            background: "yellow",
            fontSize:"30px"
        }
        return (
            <div>
                
               <h1> {10 + 20}-{myname}</h1>
                <h2> {10 > 20 ? 'aaaa' : 'bbbb'}</h2>
                <div style={obj}>123123</div>
                <div style={{ background: "yellow" }}>aaaaaa</div>
                <div className="active">bbbbbb</div>
                <label htmlFor="username">User name:</label>
                <input type="text" id="username"></input>
        </div>
        )
  }
}
/**
 * 快速创建组件 rcc
 */