Override css variables ionic v4

Ionic Framework
1

Hi… is there a best way to override css default setting?
e.g. $split-pane-md-side-min-width

And is it possible also override default item-native behavior… If I don’t set color on ion-item, a background #f1f1f1 color is set on click and remain setted if my click remain on the element.

Thank you

2

CSS Variable documentation is still being worked on during the beta. I have been diving through the source code to find them currently (but I am an writing a book on Ionic 4)…

Chris
http://ionic-book.com/

3

I had the same question. It didn’t look like there was any way to override the $split-pane-md-side-min-width SASS variable from our side any longer, so I had to change the way I was doing that. Instead of overriding the SASS var, and since there wasn’t a corresponding CSS var (yet?), I was able to use this in my global.scss file:

ion-menu.main {
  min-width: 304px !important;
}

I specifically added the main class to my menu. You could target it in other ways, or even just use ion-menu { ... } if you only have one…

4

Hi

see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://www.w3schools.com/css/css3_variables.asp

And if you watch Josh Morony’s last blog on Ionic 4 you can easily see how to scope it and find the variables eligible for overriding.

Basically the documentation may not guide you, but even if it would, I think it will be better to use the inspector to find the latest overview of variables you can use (as they can change faster then the docs)

In @matteobattista case: make a split pane in Ionic 4. Use the inspector to find the element you want to style, use search to filter for -- leading variables and hope you find the one you need.

Tom

5

Thank you for the link… for my question, it seams that for ion-split-pane there are no css variable exposed… maybe in the future?

6

Submit an issue or PR on ionic github

Or hack it in the ionic split-pane code yourself, and manage all subsequent updates