라이브러리 설치 npm i styled-components

📎 고정 스타일링

버튼 스타일 꾸미기

export default function Button({children}){

    return(
        <button>
            {children}
        </button>
    )
}

import Button from './Button';

function App() {
  return (
   <Button>Button</Button>
  );
}

export default App;

npm 패키지에서 styled-components 라이브러리 불러오기

<aside> 💡 styled 함수는 속성으로 대부분 html 요소 이름을 그대로 갖고 있다.

</aside>

import styled from "styled-components"

const StyledButton = styled.button`
    padding: 6px 12px;
`

export default function Button({children}){

    return(
        <StyledButton> //함수 이름으로 교체해준다. 
            {children}
        </StyledButton>
    )
}

styled components가 적용됨

<aside> 💡 html 속성을 사용하다보니 헷갈릴 수 있어 styled components의 이름은 파스칼 케이스(PascalCase)로 지정한다.

</aside>

추가 스타일링