styled-components 사용 관련

[cslim0527]

antd, mui 같은 UI Library 사용 시 styled-components 적용 방법을 찾지 못하셨다고 하여 리뷰 드립니다.

1. antd 을 사용하지 않고 HTML 태그를 사용해 스타일을 적용하신 코드들은 충분히 적용 가능 했을거라고 봅니다.

<div id="todo-layout">
//...

<TodoContainer>
//...

2. antd 컴포넌트를 사용했을때 styled-components를 사용하여 커스텀 할 수 있습니다.

// styled-component 사용부분
 <ThemeChangeButton
          onClick={handleToggleDarkMode}
          $isDarkMode={isDarkMode.toString()}
        >
          <BgColorsOutlined />
 </ThemeChangeButton>

// styled-component 정의 부분
const ThemeChangeButton = styled(Button)`
  border: none;
  padding: 5px 10px;
  ${({ $isDarkMode }) => css`
    color: ${$isDarkMode === "true" ? "#fff" : "inherit"};
    background-color: ${$isDarkMode === "true" ? "#1a1c35" : "#fff"};
  `}
`;

[bigboom1253]

앗.. 제것 같은 경우에는 styled(Button) 요부분에서 antd Button으로 인식하지 못하는 문제가 있었는데, 한번 다시 확인해보겠습니다! 감사합니다