Components: Documentation for including core styles is not clear

[jelbourn]

As of alpha.7, applications using the components need to include the core styles in addition to individual components.

• [x] All core styles should be consolidated into a single theme file under @angular/material/core.
• [ ] Our getting started guide should reflect this step.

Missing these styles can manifest several odd effects, such as:

• Ripples look insane
• Overlays are not positioned correctly.

[artiz]

Workaround for webpack builds:
import 'style!@angular2-material/core/style/core.css';
import 'style!@angular2-material/core/overlay/overlay.css';
works for me in https://github.com/AngularClass/angular2-webpack-starter

[elvirdolic]

In the latest version 2.0.0-alpha.9 this has changed.

instead of including overlay and core.css you have to include now a theme eg.

../node_modules/@angular/material/core/theming/prebuilt/purple-green.css

You have to change also the Module Import and use only MaterialModule instead of single Modules. It works then

[RoxKilly]

I appreciate the theming options out of the box! It seems that none of the prebuilt themes match the CSS styling of the previous release (alpha 8): a shade of green as primary, and a shade of pink as secondary I believe.

Is this an oversight? Because it means that to maintain the previous look, we need to build a custom theme.

[Tim-Schwalbe]

I don't even see in the documentation that I have to include the css. I only make it work by searching the web.
Is this correct or did I watch in the wrong place?

edited: It's here: https://github.com/angular/material2/blob/master/docs/theming.md

simply put this in your index.html header:
<link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

If this doesn't work for you try this:
<link href="https://unpkg.com/@angular2-material/core/style/core.css" rel="stylesheet">
<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

[tommysella]

Even though it's described in the https://github.com/angular/material2/blob/master/GETTING_STARTED.md, it would be good to make it more clear that it's a requirement, and really need to be included.

[alexjoverm]

I must point out @tommysella comment, I've spent some precious time finding out why the components were not styling correctly, till I included a theme. It doesn't looks like required in the docs.

[kara]

Closed by https://github.com/angular/material2/pull/1447.

[peterpeterparker]

Ok I just gonna let that here because I had to modify a bit the solution of @artiz and @elvirdolic

First install style-loader

npm install --save-dev style-loader

Then in your module import like following

import 'style-loader!../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

This tutorial about how to include material might also be useful

https://github.com/AngularClass/angular-starter/wiki/How-to-include-Material

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}