Partial styling not effected
Closed this issue · 2 comments
i wanted to customize the styles (background color and fonts) but not go fully unstyled. However, the custom fonts get's applied but the background color does not not
To Reproduce
- setup sonner native as normal
- add default styles to toaster:
<Toaster
theme={colorScheme}
toastOptions={{
titleStyle: {
fontFamily: "poppins-semibold",
color: NavTheme[colorScheme].colors.text,
},
descriptionStyle: {
fontFamily: "poppins-regular",
color: NavTheme[colorScheme].colors.text,
},
toastContainerStyle: {
backgroundColor: NavTheme[colorScheme].colors.secondary,
},
}}
/>
where colors.text = #F9FAFB | #030712
where colors.secondary = #1f2937 | #f3f4f6
based on the current theme
Expected behavior
The background color of the toast should appear as expected instead of casting an off background behind the actual toast.
Environment info
Library | Version |
---|---|
sonner-native | 0.13.0 |
react-native | 0.74.5 |
react-native-reanimated | 3.10.1 |
react-native-gesture-handler | 2.16.1 |
To speed up the fixing process since I don't have time until tomorrow to take a look at this, did you try:
- Some other style key for the background? I'm on mobile currently but wasn't here some content style too?
- Did you try passing the style via the toast() call and see if that works? Just to help me diagnose this later.
Yes, I tried some other styles too and even with classnames. 'Nativewind' classnames had no effect at all.
contentStyle was applied to the section of the 'title' and 'description' only, combined with border styles still didn't work.
Tried specifying the styling in different props too:
- style
- toastoptions.style