Overriding Ionic Sass in Ionic v4

Ionic Framework
1

Is it still possible to override Ionic Sass variables in Ionic v4? I found nothing in the documentation…

I mean these https://ionicframework.com/docs/theming/overriding-ionic-variables/ in v4?

2

Ionic 4 web components use CSS4 variables for styling, so you will be able to overwrite these values globally like this:

:root {
   --ion-some-value: 30px;
}

and the variables also cascade like normal CSS rules, so you could also apply the variable changes only to specific selectors:

some-selector {
  --ion-some-value: 30px;
}

EDIT: For anybody who wants to know more about CSS4 variables in Ionic 4: https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/

1 Like
3

Cool thx for the answer, I’ll give a try

Do you know if there is a migration cheat sheet somewhere?

I mean a table which display old/new keys?

Like

v3                     |     v4
$font-family-md-base   |     --ion-whatever-value
4

@joshmorony in the theory yes, but for fonts actually no it doesn’t work

in v3 I could do the following to set the following font style for the all iOS platform

$font-family-ios-base: "Lato";

in v4 settings the following doesn’t actually work

:root {
    font-family: "Lato";
    --ion-font-family: "Lato";
}

because the default font

:root[mode=ios] {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
    --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
 }

is stronger. I tried then to set the following

 :root {    
    &, &[mode=ios] {
     font-family: "Lato";
     --ion-font-family: "Lato";
}

but unfortunately the default font is still used. so in the case of font the only way I found to set the font globally was to do the following

* {
   // Fonts
  font-family: "Lato";
  --ion-font-family: "Lato";
}
5

Is there a list of default Ionic CSS4 variables? I’d like to change the button height on a certain page and I’m taking stabs in the dark about what the CSS4 variable would be. (–ion-button-height doesn’t seem to work… but I’m guessing at that)

1 Like
6

There many tutorials now available, like the articles or video provided by @joshmorony, therefore I close this post

7

hello, i try to remote carot arrow but i can’t remote it. I use Ionic5 with Reactjs. Please help.ionic delete flat arrow of IonSelect