Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Undocumented 'Customization via css variables'? #2

Open
LiteSoul opened this issue Feb 22, 2021 · 1 comment
Open

Undocumented 'Customization via css variables'? #2

LiteSoul opened this issue Feb 22, 2021 · 1 comment

Comments

@LiteSoul
Copy link

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
Copy link

jash8506 commented Jul 29, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants