Override ionic scss in component layer

Ionic Framework ionic-v3
1

Doing a new login screen using the Ionic input. For Android there is a line under it that changes color when focused. The color defaults from the primary color in variables.scss.

For the login screen I need that color to be white.
$text-input-md-highlight-color: white;
I had to put this in variables.scss I don’t want this global.

I have tried moving it down login.scss. That doesn’t seem to work.

Any way to override a Ionic scss variable just in one component?

2

If you use ionic generate page LoginPage to create your page, it will automatically create an SCSS file called login-page.scss in a folder with your HTML and TS files. That CSS file will include something like…

page-login-page{
    // put your custom styles here
}

If you created the page manually, you might need to create the SCSS file.

3

Thanks ebellempire, that is what I tried but could not get it to pick it up. Only if it was in the variables.scss would we see it get picked up.

Have you got this working?

4

I think you can’t use those variables only in one scope, try adding the css for the highlight in
that scss file:

And make sure that the page’s scss file is working, when you added it manually you might have to specify it in the page’s ts file

5

or style directly on html file using !important?

6

Take a look at: https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/handy-tools/variable-scoping.html

It explains Sass variable scoping and the use of !default and !global.

And: https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/

7

It seems like variables declared in variable.scss are in global scope.
I know the color values can be pulled from anywhere. I know if I set the specific Ionic variable the changes show up throughout.

Can a global scope variable be overwritten using a local? variable. It doesn’t seem like it. Maybe its back to how ionic loads variables.
Ionic variables are all global. At least that is what it seems like.

8

If you only want to style a specific component and not change the overall look of that component, you need to change the style of the actual html element or the class of the html element in your component. So, you need to do an inspect element and see what class it’s using to highlight, and then set your style in your component scss file for that class.

9

So, in your component’s scss file you probably want this

.item-md.item-input.input-has-focus .item-inner,.item-md.item-input.item-input-has-focus .item-inner {
    border-bottom-color: white;
    -webkit-box-shadow: inset 0 -1px 0 0 white;
    box-shadow: inset 0 -1px 0 0 white
}

.list-md .item-input.input-has-focus:last-child,.list-md .item-input.item-input-has-focus:last-child {
    border-bottom-color: white;
    -webkit-box-shadow: inset 0 -1px 0 0 white;
    box-shadow: inset 0 -1px 0 0 white;
}

Ionic currently doesn’t make use of component scoped styles like Angular does, so you need to wrap this in the name of your component to keep it local. As someone else said if you created this with the cli that should be there for you.