How to use JSS to work with root styles of Ionic?

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 :stuck_out_tongue: 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!