[CSS] Antd CSS 수정하기

Ant Design - The world's second most popular React UI framework

Ant Design - The world's second most popular React UI framework

 

Antd에서 기능을 import해서

input, button, Modal 심지어 Dropdown까지 

모던한 디자인의 요소들을 사용할 수 있습니다.

그런데 색깔이나 크기가 마음에 안든다면 CSS를 수정해야하는데

Ant의 태그들은 CSS가 className을 먹인다고 해서 수정되지 않습니다.

코드를 살펴보겠습니다.

 

 <Modal

                title="카드 등록"

                visible={AddModalVisible}

                onOk={handleOk}

                onCancel={handleCancel}

                footer={[

                    <Button key="back" onClick={handleCancel}>닫기</Button>,

                ]}

                className="Modal"

            >

               <div className="input-container">

 

저같은 경우는 Modal을 import해서 사용했는데요.

일단 className으로 'Modal'을 부여한 상태입니다.

여기서 className에 그냥 CSS를 부여하면 안되고

다음과 같이 코드를 짜주셔야합니다.

 

/* 전체 모달 스타일 */

.Modal .ant-modal-content {

   

    border-radius: 12px;

    padding: 20px;

    width : 500px;

    height : 700px;

 

}

/* 모달 헤더 스타일 */

.Modal  .ant-modal-header {

    background-color: #1890ff;

    color: white;

    border-radius: 12px 12px 0 0;

    text-align: center;

}

/* 모달 제목 스타일 */

.Modal  .ant-modal-title {

    font-size: 18px;

    font-weight: bold;

}

/* 모달 닫기 버튼 (X) 스타일 */

.Modal .ant-modal-close {

    top: 12px;

    right: 12px;

}

 

Antd에서 지정한 클래스이름을 원래 클래스이름 뒤에 붙여야 합니다.

클래스이름은 Antd에서 개발자 모드로 찾아보거나

공식 깃허브에서 해당 내용을 찾아보는 방법이 있습니다.

 

ant-design/ant-design: An enterprise-class UI design language and React UI library

GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library