Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

:host not working any more for styling

See original GitHub issue

To customize the style of any material component this worked in the past:

:host {
    md-input {
        .md-input-underline {
            border-top: 1px solid rgba(254, 254, 254, 0.70);
        }
        .md-input-placeholder {
            color: rgba(254, 254, 254, 0.70);
        }
    }
}

After the update the same code, changed with the new component naming does not work:

:host {
    md-input-container {
        
        .mat-input-underline {
            border-top: 1px solid rgba(254, 254, 254, 0.70);
        }

        .mat-input-placeholder {
            color: rgba(254, 254, 254, 0.70);
        }

        .mat-input-ripple {
            background-color: rgba(254, 254, 254, 0.70);
        }

    }
}

What is the recommended way to customise style of material components in isolation?

Issue Analytics

State:
Created 7 years ago
Comments:12 (5 by maintainers)

Top GitHub Comments

3reactions

grizzm0commented, Feb 7, 2018

@abskr82 No need for :host and it’s ::ng-deep with two “:”.

2reactions

joshwienscommented, Feb 27, 2017


:host /deep/ {
    md-input {
        .md-input-underline {
            border-top: 1px solid rgba(254, 254, 254, 0.70);
        }
        .md-input-placeholder {
            color: rgba(254, 254, 254, 0.70);
        }
    }
}