Material styling isn't working

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To have style image

What is the current behavior?

No styling image

What are the steps to reproduce?

Create a project using Angular CLI, install @angular/material and @angular/cdk, load toolbar and set color="primary" (or any other component). I’ve setup a simple repository using Angular CLI which you can find here which reproduces the problem. Just run npm install && ng serve. The material style is imported and is loaded but the components aren’t using it for some reason. I have also tried to directly import the style as <link> in the index.html file, but that didn’t work as well.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.6
node: 7.10.1
os: linux x64
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

14reactions
leocaseirocommented, Aug 3, 2017

Perhaps you need to make sure you completed Step 4 (Include a Theme)

https://material.angular.io/guide/getting-started#step-4-include-a-theme

Import on your style.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

In case you want to use Material Icons, include it on your index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Related to #5431

6reactions
johnfradescommented, Feb 28, 2019

I included a prebuilt theme and still the style didn’t apply >_<

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Material styles not being applied correctly
I was getting the styling issue and in my case it worked by just applying color="primary" and the code is changed.
Read more >
Angular Material Theming System - Complete Guide
ng new my-app --style=scss --defaults. Use the Angular CLI's installation schematic to set up your Angular Material project by running the following command ......
Read more >
styling not working on component - Material Design for Bootstrap
Hi,im new to angular and have a question. i added a component named header via angular's cli. it created the files including a...
Read more >
Customizing component styles - Angular Material
While Angular Material does not support defining custom styles or CSS ... Angular Material disables style encapsulation for all components in the library....
Read more >
Angular Material styles not being applied correctly - iTecNote
I have just upgraded to angular 7 so it could be related to that. This is my dialog which just displays in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found