리액트 inline 스타일링

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<h1 style={"color:red"}>Hello World!</h1>, document.getElementById("root"));

 

react에서 inline 스타일링을 하는 것은 일반 html에서 하는 것과 다르다. 따라서 그냥 위와 같이 적으면 오류가 나게된다.

style부분에 javascript 객체를 넣어주어야 하고, 이는 아래와 같다.

 

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<h1 style={{color:"red"}}>Hello World!</h1>, document.getElementById("root"));

 

이를 이용하여 아래와 같이 커스텀 스타일링이 가능하다.

 

const customStyle = {
  color: "red",
  fontSize: "20px",
  border: "1px solid black"
};

ReactDOM.render(
  <h1 style={customStyle}>Hello World!</h1>,
  document.getElementById("root")
);

마음에 안드는 부분만 바꿀수도 있다.

customStyle.color="blue"