Open ghostdevv opened 3 years ago
@ghostdevv I don't think so. If we follow this approach, we have to provide props for everything like margin, background, color, and even for different sections, so it will not scale well. IMO, overriding respective class is better solution.
<div class="parent">
<ToastContainer {toasts} let:data={data}>
<FlatToast {data} />
</ToastContainer>
</div>
<style>
.parent :global(.st-toast-description) {
color: red;
font-size: 1rem;
}
</style>
@mzohaibqc Alright that makes sense, maybe instead of using rem
s for sizing, em
or even px
could be used? I had to rework the fontsizing of my entire app to make rems work
You don't need to rework your whole app. Just override the toast related font size with any unit like rem, px or em. I don't understand why you need to refactor your whole app just to change toast styles.
On Sun, 27 Jun 2021, 5:23 pm GHOST, @.***> wrote:
@mzohaibqc https://github.com/mzohaibqc Alright that makes sense, maybe instead of using rems for sizing, em or even px could be used? I had to rework the fontsizing of my entire app to make rems work
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mzohaibqc/svelte-toasts/issues/3#issuecomment-869153237, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIBRKYMK5XV2P3G6R5CXELTU4J5ZANCNFSM47LPETLA .
@mzohaibqc Everything in the FlatToast at least uses rem
s for margins, padding etc etc - and my app by default was setting 1rem
equal to 8px
, but the default for browsers is 16px
. Since you would've designed everything using 16px
it really messed up the toast, so I had to set it to 16px
and then halve all of my rem values to compensate
You don't need to do that. Just add a parent container and override FlatToast styles using :global like this
.parent :global(.st-toast-description) { font-size: 14px; // or 1em; }
On Mon, 28 Jun 2021, 5:45 am GHOST, @.***> wrote:
@mzohaibqc https://github.com/mzohaibqc Everything in the FlatToast at least uses rems for margins, padding etc etc - and my app by default was setting 1rem equal to 8px, but the default for browsers is 16px. Since you would've designed everything using 16px it really messed up the toast, so I had to set it to 16px and then halve all of my rem values to compensate
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mzohaibqc/svelte-toasts/issues/3#issuecomment-869255349, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIBRK4U5WQEWBGCSFZE7DLTU7AY7ANCNFSM47LPETLA .
@mzohaibqc that doesn't fix the issue of everything else using rems
I would love to be able to set the font size without having to edit the
st-toast-title
andst-toast-description
classes, via a prop I imagine