230904 개발일지 TIL - React에서 styled-components와 Ant Design Button을 사용할 때 발생하는 문제 해결 방법

React에서 styled-components와 Ant Design Button을 사용할 때 발생하는 문제 해결 방법

React 애플리케이션을 개발할 때 styled-components와 Ant Design의 Button 컴포넌트를 함께 사용하는 경우, 스타일이 적용되지 않거나 경고 메시지가 발생할 수 있는데 이 문제를 해결하기 위해 styled-components에서 특정 prop을 DOM 요소로 전달하지 않도록 설정해야 한다.

colorTheme이라는 prop을 사용하여 버튼의 스타일을 설정하고 있다.

const ButtonToggleBase = styled(Button)`
  ${({ colorTheme }) =>
    colorTheme === 'dark' &&
    `
    background: #333;
    color: var(--color-white);
  `}
  ${({ colorTheme }) =>
    colorTheme === 'light' &&
    `
    background: none;
  `}
  ${({ colorTheme }) =>
    colorTheme !== 'dark' && colorTheme !== 'light' &&
    `
    background: var(--color-bg);
  `}
`;

이 코드를 그대로 사용하면 React에서 경고 메시지가 나타날 수 있다. 이러한 경고 메시지는 DOM 요소에 스타일 관련 prop이 전달되는 경우에 발생한다.

해결방법은 styled-components의 withConfig 메서드와 shouldForwardProp 함수를 사용하여 스타일을 설정한 컴포넌트로부터 특정 prop을 전달하지 않도록 설정하는 것이다.

import { Button } from 'antd';
import styled from 'styled-components';

const ButtonToggleBase = styled(Button).withConfig({
  shouldForwardProp: (prop) => prop !== 'colorTheme',
})`
  ${({ colorTheme }) =>
    colorTheme === 'dark' &&
    `
    background: #333;
    color: var(--color-white);
  `}
  ${({ colorTheme }) =>
    colorTheme === 'light' &&
    `
    background: none;
  `}
  ${({ colorTheme }) =>
    colorTheme !== 'dark' && colorTheme !== 'light' &&
    `
    background: var(--color-bg);
  `}
`;

export const H = {
  ButtonToggle: ButtonToggleBase,
};

위 코드에서 shouldForwardProp 함수를 사용하여 colorTheme prop이 DOM 요소로 전달되지 않도록 설정했다. 이렇게 하면 경고 메시지가 사라지고, styled-components와 Ant Design Button을 함께 사용할 때 발생하는 스타일 관련 문제를 해결할 수 있다.