React - Style

클래스로 스타일 지정

string으로 구성.

function Button({ className = "", ...rest }){
  return (
    <button className={`btn ${className}`}
		{...rest}
	/>)
}

const Child = () => {
  return (
    <>
      <Button className="red" style={{borderRadius: "50%"}}>button1</Button>
      <Button className="blue">button2</Button>
      <Button className="yellow">button3</Button>
      <Button className="green">button4</Button>
    </>
  );
};

속성으로 스타일 지정

요소에 color라는 속성 지정

function Button({ className = "", color, ...rest}){
  return (
    <button className={`btn ${className} ${color}`} 
		{...rest} />
	)
}

const Child = () => {
  return (
    <>
      <Button color="red" style={{borderRadius: "50%"}}>button1</Button>
      <Button color="blue">button2</Button>
      <Button color="yellow">button3</Button>
      <Button color="green">button4</Button>
    </>
  );
};

style로 스타일 지정

객체로 구성.
카멜케이스.
className보다 우선시 된다.

아래와 같이 fontSize를 중복 스타일로 준 button1의 경우,
인라인 style에 지정되어있는 스타일을 우선으로 반영된다.

function Button({ className = "", style, ...rest}){
  return (
    <button className={`btn ${className}`} 
		style={{fontSize: 50, ...style}}
		{...rest} />
	)
}

const Child = () => {
  return (
    <>
      <Button className="red" style={{fontSize: 20}}>button1</Button>
      <Button className="blue">button2</Button>
      <Button className="yellow">button3</Button>
      <Button className="green">button4</Button>
    </>
  );
};

class로 먹인 스타일 < style로 먹인 스타일 < inline style로 먹인 스타일
뒤에 오는 코드가 우선순위