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

[gopherkhan]

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.

[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.

[kuncevic]

@jelbourn can you provide any feedback on this one?

I am using md-hint, it is bringing its own styles, sitting in the head

<style>
...
.md-hint {
    display: block;
    position: absolute;
    font-size: 75%;
    bottom: -.5em;
}
...
<style>

I want to override the 'bottom' and set color for all md-hint in my project so I can do this <md-hint [ngStyle]="{'color': 'red', 'bottom': 'auto'}"> as per https://github.com/angular/material2/issues/348. But this way I have to repeat that for each md-hint inside all components.
How would you just specify the styles just in one place(css file) so the original .md-hint css class gets overridden?
Right now If I define my custom css in the global stylesheet(styles.bundle.css) it won't affect md-hint becasue global stylesheet loads before material styles so it gets overridden.

I could of use !important but it is sounds a bit dirty. ViewEncapsulation.None not an option for such case as well.

[Snesi]

Yeah, it's a little hard to style the slider. If for example, you need to add a unit next to the label's value, the wrapper needs to be bigger, but in order to do so I've had to add global styles with !important everywhere.

.mat-slider-thumb-label {
  opacity: 1;
  right: -30px !important;
  top: -55px !important;
  width: 75px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background-color: teal !important;
  transform: scale(1) rotate(0) !important;
  &::after {
    content: ' ';
    width: 20px;
    height: 20px;
    position: absolute;
    transform: rotate(45deg);
    bottom: 0;
    left: 28px;
    background-color: teal;
  }
}

.mat-slider-thumb-label-text {
  transform: rotate(0deg) !important;
  position: relative;
  opacity: 1 !important;
  left: -6px;
  // TODO: find a better way to add square meters
  &::after {
    content: ' m²';
    position: absolute;
    width: auto;
    height: auto;
    white-space: pre;
    color: white;
  }
}

To get this result:

Is there a better way to do this??

[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);
}

[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._}