[CSS in JS] Styled Component

CSS IN JS : JS에서 CSS를 작성하는 것.
동적인 스타일링이 가능하다

설치

$ npm install styled-components

기본

const Component = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`

props

props를 받을 수도 있다.
아래는 구조분해할당을 이용하여 작성한 것인데, 이게 더 가독성이 좋은 것 같다.

const StBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
  border: 1px solid ${({ borderColor }) => borderColor};
`;

전역 스타일

GlobalStyle.jsx 파일을 만든 후 createGlobalStyle을 이용하여 Style을 정의해준 다음,

// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    // 폰트
  }
`;

export default GlobalStyle;

App.jsx에 추가해준다

function App() {
  return (
    <>
      <GlobalStyle />
      <Box />
    </>
  );
}