React- styled-components로 버튼 만들기

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

styled-components로 버튼 만들기

components/Button.js

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
    /* 공통 스타일 */
    display: inline-flex;
    outline: none;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight:bold;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;

    /* 크기 */
    height: 2.25rem;
    font-size: 1rem;

    /* 색상 */
    background: #228be6;
    &:hover {
        background: #339af0;
    }
    &:active {
        background: #1c7ed6;
    }

    /* 버튼 간의 간격 */
    & + &{
        margin-left: 1rem;
    }
`;

function Button({ children, ...rest }) {
return <StyledButton {...rest}>{children}</StyledButton>;
}

export default Button;

위와 같이 버튼을 스타일하고 StyledButton 컴포넌트를 만들어준다.

 

 

App.js

import React from 'react';
import styled from 'styled-components';
import Button from './components/Button';

const AppBlock = styled.div` // 버튼을 둘러싸는 외부 테두리 스타일링
  width: 512px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid black;
  padding: 1rem;
`;


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

export default App;

버튼을 둘러싸는 외부 테두리를 스타일링 해주고 Button 컴포넌트를 불러와준다.

 

 

실행 결과