230916 개발일지 TIL - antd에서 'Modal' is not defined no-undef

antd에서 'Modal' is not defined no-undef

문제 원인
Blocks.styles.js파일로 스타일을 분리하였는데
antd에서 Modal 컴포넌트를 사용하려면 styled-components와 마찬가지로 antd에서 해당 컴포넌트를 불러와야 하는데 불러오지 않아서 발생하는 현상

문제 해결

import { Modal } from 'antd';

상단에 import문을 추가

import styled from 'styled-components';
import { Modal } from 'antd'; // 추가된 부분

export const B = {
  CustomModal: styled(Modal)`
    .ant-modal-close-x {
      color: #ff7c38;
      font-size: 20px;
    }
  `,
  
};

느낀 점
jsx파일에서만 사용할 import문을 추가해주면 되는 게 아니라 외부 스타일 파일에서도 연결해주어야 한다는 것을 알게 되었다.