Add Instructions for overriding component styles through link tag in index.html

Bug, feature request, or proposal:

Documentation Update:

Currently ViewEncapsulation in Material components makes things extremely hard to style without using ::shadow or /deep/ combinators (both of which are currently being deprecated).

We need to indicate to users that they can override component styles using a global CSS file, specified in the link tag of their index.html

Otherwise the components appear too rigid for actual use.

What is the expected behavior?

Documentation indicates easy way to customize styles for Materials components (e.g. link color on a card).

What is the current behavior?

No such documentation exists. Components appear excessively rigid/restrictive, as if you are locked in to specific styles, colors, etc.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

Is there anything else we should know?

Referred here by Martin.

[willshowell]

@Snesi not necessarily better, but you can remove your !importants by increasing specificity of your styles

.mat-slider.mat-slider-thumb-label-showing
.mat-slider-thumb-container
.mat-slider-thumb-label {
  opacity: 1;
  right: -30px;
  top: -55px;
  width: 75px;
  height: 30px;
  border-radius: 10px;
  background-color: teal;
  transform: scale(1) rotate(0);
}

[jelbourn]

@gopherkhan FYI, only a handful of the component currently have ViewEncapsulation turned on (tabs, progress, tooltip). What’s likely getting in your way is the ViewEncapsulation in your own components. Here’s an example of a component defining styles that affect other components by turning off ViewEncapsulation.

At this point, we don’t want to encourage overriding of any styles in Material; because we’re still in alpha, our css classes and DOM structure will change. Once things are more stable, we plan on providing an API of classes that you’re able to style.