[React] CSS

React에서 css class 사용 시 className 으로 attribute 이름을 사용

CSS를 import 해서 사용

import React from "react";
import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  let name = "테스트";

  return (
    <div className="App">
      <MyHeader />
      <h2>안녕 리액트 {name}</h2>
      <b id="bold_text">React.js</b>
    </div>
  );
}

export default App;

인라인 스타일로 CSS 사용

import React from "react";
import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  let name = "테스트";

  const style = {
    App: {
      backgroundColor: "black",
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "green",
    },
  };

  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕 리액트 {name}</h2>
      <b style={style.bold_text} id="bold_text">
        React.js
      </b>
    </div>
  );
}

export default App;