Hi, I would like to use JSS to style my components and also create a theme using that. Is this possible? I have been searching the whole day and haven’t found anything regarding Ionic and JSS. The only post I found was from 2017, telling the OP that Ionic is not Wordpress. If there’s a way, please help me out! Thanks
Not sure what JSS is, but if it’s a css approach for React, there’s nothing stopping you from using it. Ionic react doesn’t have anything that stops you from using different css-in-js solutions.
Thanks for replying Mike! Yes, JSS is css-in-js. However, I was talking about theming using JSS? Because currently the root styles can only be changed using CSS.
How do I translate this into JSS.
:root {
--ion-color-angular: #ac282b;
--ion-color-primary: #3880ff;
--ion-color-secodary: #3810ff;
}
For example MaterialUI has a built in theme object which we can modify (https://material-ui.com/customization/theming/) and then use this as parent component so the styles trickle down to the children.
I hope what I wrote made sense, again thanks a lot for your help!
So I would separate global theme and component styles here.
The global theme can still be the variables.
If you want to try to force jss, you could use their @global
tag
const rootStyles = createUseStyles({
'@global': {
':root': {
// the ionic variables.
}
}
})
Honestly, it seems really unnecessary when regular css just works.
It is unnecessary but just a personal preference Thanks a lot for all the help! I’ll be sure to try this out
Just thought I would give an update to this thread, the solution you suggested works great! There are some caveats that I face from time to time to edit some component’s root styles, but besides that it works like a charm! Thanks @mhartington!