REACT 인라인 스타일을 적용해보자

html에서 스타일을 엘리먼트에 바로 적용할 때는 style="margin:1rem;"와 같은 방법으로 적용을 해주었다.

리액트에서는 객체형태의 값을 전달주어 인라인스타일을 적용할 수 있다!

function Button() {
    return <button style={{backgroundColor:"#333", color:"white"}}>스타일 적용</button>;
  }
  
  export default Button;

결과:

위 처럼 바로 스타일을 구구절절 적으면 가독성이 떨어 질 수 있기 때문에
미리 객체 값으로 스타일을 지정 해 둔 뒤 객체를 전달하여 사용할 수도 있다!

const btnStyle = {
	border:"1px solid black",
	borderRadius:"15px",
	color:"#000",
	backgroundColor:'#fff',
};

function Button() {
    return <button style={btnStyle}>스타일 적용</button>;
  }
  
  export default Button;

결과:

이 스타일에 객체로 전달되기 때문에 스프레드 연산자를 이용하여 중복 되는 스타일에 사용할 수도 있다

  const btnStyle = {
    borderRadius:"15px",
    backgroundColor:'#fff',
  };
  
  const redBtnstyle = {
    ...btnStyle,
    border:"1px solid red",
    color:'red'
  }
  const blueBtnstyle = {
    ...btnStyle,
    border:"1px solid blue",
    color:'blue'
  }

이외에 프롭스의 값에 따라 삼항연산자를 이용하여 객체를 다르게 줄 수도 있다.

결과:!