[React] react-toasts 의 style 변경하기 - 떽떽대는 개발공부

2021/01/05 - [React] - [React] react-toasts 를 사용하여 toast popup 띄우기-떽떽대는 개발공부

[React] react-toasts 를 사용하여 toast popup 띄우기-떽떽대는 개발공부

 

 

 

 

이전 글에서 react-toasts 모듈을 사용하여 toast 팝업 창을 구현했다.

하지만, 해당 toast 창은 css가 제한되어 있어 고객이 원하는 대로 구현하는 데 한계가 있었다.

 

열심히 서치한 결과 아래와 같이 해당 토스트 클래스에 css 를 추가해서 변경 하였다.

css 에는 !import 문을 붙여 우선권을 부여하였다.

.toast {
    font-size: 16px !important;
    color: #fff !important;
    background-color: #0e110fd5 !important;
    border-radius: 5px !important;
    min-height: 30px !important; 
    width: 300px !important;
    margin: auto !important;
    display: inline-block !important;
    line-height: 30px !important;
}

 

위와 같이 css 적용하면 웬만하면 css 적용 될 것이다.

그런데 나는 gitlab 에 올렸다가 배포할 때 이 부분이 누락되었다.

그래서 아래와 같이 js 파일 내에서 css 적용을 해주었다.

 

import React from 'react';
import {ToastsContainer, ToastsStore, ToastsContainerPosition} from 'react-toasts';

const Test = () => {
    const onClickCopyUrl = () => {
        console.log('클릭');
        ToastsStore.success("URL has been copied")
    }

    return(
        <div className="url_copy">
            <style jsx="true">{`
                .toast {
                    font-size: 16px !important;
                    color: #fff !important;
                    display: inline-block !important;
                    background-color: #000000 !important;
                    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.16) !important;
                    opacity: 0.7 !important;
                    border-radius: 5px !important;
                    width: 343px !important;
                    line-height: 53px !important;
                    height: 53px !important;
                    margin: 129px 16px auto !important;
                }
            `}</style>
            <button
                type="button"
                className="btn_copy"
                onClick={onClickCopyUrl}>
                    클릭
            </button>
            <ToastsContainer position={ToastsContainerPosition.BOTTOM_CENTER} store={ToastsStore} />
        </div>
    )
}

export default Test;

 

위와 같이 적용하여 css 적용 안되는 문제까지 해결 하였다.