Can't change ion-input style from global.scss

Ionic Framework
1

Ionic v4 has been a nightmare for me being able to override styles. I find it quite confusing and overly complex to simply change the style of an input but that’s beside the point… The issue I’m currently having is that my css works fine when on the component .scss file but I wish to globally override all ion-input but it will only work from global.scss when I use !important

ion-input {
    background: rgba(var(--ion-color-light-rgb), 1);
    color: var(--ion-color-light-contrast);
    margin-bottom: 16px;
    height: 50px;
    border-radius: var(--radius);
    padding-left: 16px;
}

ion-input,
ion-button {
    max-width: var(--content-max-width) !important;
    margin: 0 auto 16px auto !important;
}

This code works perfectly fine on the individual page .scss files but once I put it in global.scss it no longer will work unless I use !important

2

Improve specificity to your style while applied to global.

3

How specific must it be? My ion-input is literally directly after ion-content so it doesn’t make sense why it won’t override…

I’ve tried ion-app ion-content ion-input and nothing seems to change it yet from variables.scss I can just specify ion-input and it will take the styles perfectly.

4

Have you tried to specify CSS Custom Properties provided for ion-input? https://ionicframework.com/docs/api/input#css-custom-properties

5

Yes, they have no effect.

6

Weird. This should work, just tested in a fresh app:

:root {
    ion-input {
        --background: var(--ion-color-primary);
    }
}

(edit: I added this in global.scss, but you can add it in another global .scss file)

Explanation:

1 Like
7

:root seems to work, but what is the purpose of that?

8

I included the docs link. I won’t be able to explain it better :slight_smile:

9

That’s simpler than I thought actually…

:root - All platforms
.ios - iOS only
.md - Android only

That makes sense now

1 Like