React- styled-components 버튼 outline, fullWidth

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

 

outline, fullWidth 버튼 만들기

 

Button 컴포넌트에 outline props과 주어지면 버튼의 테두리만 보이게, fullWidth props과 주어지면

버튼의 크기가 100%를 차지하게 만들어 보겠다.

 

Button.js

import React from 'react';
import styled, { css } from 'styled-components';
import { darken, lighten } from 'polished'; // polished의 darken, lighten 함수 불러옴


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;

    /* 크기 */
    ${props => 
        props.size === 'large' &&
        css`
            height: 3rem;
            font-size: 1.25rem;
        `}

    ${props => 
        props.size === 'medium' &&
        css`
            height: 2.25rem;
            font-size: 1rem;
        `}
    
    ${props => 
        props.size === 'small' &&
        css`
            height: 1.75rem;
            font-size: 0.875rem;
        `}

    /* 색상 */
    ${props => {
        const color = props.theme.palette[props.color];
        return css`
            background: ${color};
            &:hover {
                background: ${lighten(0.1, color)};
            }
            &:active {
                background: ${darken(0.1, color)};
            }
            ${props =>
            props.outline && /* outline 설정 */
            css`
                color: ${color};
                background: none;
                border: 1px solid ${color};
                &:hover {
                    background: ${color};
                    color: white;

                }
            `}
        `;
    }}

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

    ${props => props.fullWidth && /* fullWidth 설정 */
    css`
        width: 100%;
        justify-content: center;
        & + & {
            margin-left: 0;
            margin-top: 1rem;
        }
    `}

`;

function Button({ children, color, size, outline, fullWidth, ...rest }) {
return <StyledButton color={color} size={size} {...rest} outline={outline} fullWidth={fullWidth}>{children}</StyledButton>;
}

export default Button;

 

위 코드와 같이 outline과 fullWidth를 설정해준다.

 

 

App.js

import React from 'react';
import styled, { ThemeProvider } from 'styled-components'; // ThemeProvider를 사용하면 styled-components를 사용하는 모든 컴포넌트에서 색상을 지정할 수 있다.
import Button2 from './components/Button';

const AppBlock = styled.div`
  width: 512px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid black;
  padding: 1rem;
`;

const ButtonGroup = styled.div`
  & + & {
    margin-top: 1rem;
  }
`;

const palette = {
  blue: '#228be6',
  gray: '#496057',
  pink: '#f06595'
};

function App() {
 
  return (
    <ThemeProvider theme={{palette}}> {/* ThemeProvider 사용 */}
      <AppBlock>
        <ButtonGroup>
          <Button color="blue" size="small" outline>BUTTON</Button>
          <Button color="pink" size="medium" outline>BUTTON</Button>
          <Button color="gray" size="large" outline>BUTTON</Button> {/* outline = outline={true} */}
        </ButtonGroup>
        <ButtonGroup>
          <Button color="blue" size="large" fullWidth>BUTTON</Button>
          <Button color="pink" size="large" fullWidth>BUTTON</Button>
          <Button color="gray" size="large" fullWidth>BUTTON</Button>
        </ButtonGroup>
      </AppBlock>
   </ThemeProvider>
  );
}

export default App;

App.js에서 Button 컴포넌트를 불러와서 렌더링 해준다.

 

 

실행 결과