[CSS] StyledComponents props 전달 방법

import styled from 'styled-components';

// 기본 스타일
const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'green')};
  color: ${props => props.color || 'black'}; /* props로 전달된 color 값이 없으면 기본값은 검정색 */
  padding: 10px;
  border: none;
`;

// 예제에서 사용할 컴포넌트
const MyComponent = () => {
  return (
    <>
      {/* primary prop이 true인 경우 파란색 배경, 그렇지 않으면 녹색 배경 */}
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </>
  );
};