React css사용방법

import React , {Component} from 'react';


class App extends Component{
  render(){

    const style = {
      backgroundColor : 'gray',
      border:'1px solid black',
      height:Math.random(Math.random() * 500 ) + 50,
      width:Math.random(Math.random() * 500) + 50,
      WebkitTransition:'all',
      MozTransition:'all',
      msTransition:'all'
    };


    return(
      <div>
        <h1>리액트 테스트</h1>
        <div style={style}></div>
      </div>
    )
  }
}

export default App;

보이는 화면

 

 

Import 방식

App.css

.my-div{
  background-color: aqua;
  font-size: 15px;
}

 

 

App.js

import React , {Component} from 'react';
import './App.css'

class App extends Component{
  render(){

    const style = {
      backgroundColor : 'gray',
      border:'1px solid black',
      height:Math.random(Math.random() * 500 ) + 50,
      width:Math.random(Math.random() * 500) + 50,
      WebkitTransition:'all',
      MozTransition:'all',
      msTransition:'all'
    };


    return(
      <div className="my-div"> 
        <h1>리액트 테스트</h1>
        <div style={style}></div>
      </div>
    )
  }
}

export default App;

className 으로 div 를 설정한이후 App.css 를 import 한이후 사용한다.

 

설정시 보이는 화면