Nodlik / react-st-modal

Simple and flexible modal dialog component for React JS
https://nodlik.github.io/react-st-modal/
MIT License
41 stars 3 forks source link

Undocumented 'Customization via css variables'? #2

Open LiteSoul opened 3 years ago

LiteSoul commented 3 years ago

Hi there! I can't find documentation to apply css variables on the modal. There seems to be some variables by inspecting... but how to use them?:

st-modal-2

Also both these links give 404:

st-modal-1

jash8506 commented 3 years ago

You can do this by putting something like

:root{
    /* Override ST Modal Defaults */
    --st-modal-borderRadius: 0px;
    --st-modal-boxShadow: none;
    ...
}

in one of your own css files. The trick is to make sure it is included/imported after 'react-st-modal' so that it overwrites the variables from the default stylesheet. This makes it a bit tricky to add global defaults near the root of your app. You could do something like

useEffect(()=>{
    document.querySelector(':root').style.setProperty('st-modal-borderRadius', '0px');
},[])

to achieve this, even if that's slightly unconventional.

@Nodlik I love this library - great work!