css 쓰기 싫으면 styled-components 쓰면됩니다.

import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼임</YellowBtn>
      </Box>
    </div>
  )
}

라이브러리 쓰듯 터미널로 다운 후 import 해온다음
위와 같이 스타일을 저장 시킬 수 있습니다
마치 컴포넌트 처럼요

장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다.

장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 원래 그냥 CSS파일은 오염됩니다.

장점3. 페이지 로딩시간 단축됩니다.

왜냐면 저기 적은 스타일은 html 페이지의

오염 된다는 뜻은 만약 css를 사용하면 다른 컴포넌트를 정의해놓은 파일 같은 곳에
css를 넣기 싫어도 연결 되어 있으면 오염이 됩니다.

만약 css가 오염되는게 싫으면 css 만들 때
module을 넣어주면 됩니다.
예로 app.css가 있으면 app.module.css로 만들면 app.js에 종속된 css가됩니다.

다시 얘기로 돌아와서 styled-components는 props기능도 있습니다.

import styled from 'styled-components';

let YellowBtn = styled.button`
background : ${ props => props.bg };
color : black;
padding : 10px;
`;

function Detail(){
return (
  <div>
      <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
      <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
  </div>
)
}

이렇게 사용하면 되는데 bg에 색을 넣어주면 그대로 작동합니다.

놀랍게도 이렇게 삼항 연산자도 사용가능합니다

let YellowBtn = styled.button` 
background : ${ props => props.bg };
color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
padding : 10px; 
`; 

이러면 진짜 blue일때 color가 white들어가고 아니면 black들어갑니다.