search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.23k stars 6.7k forks source link

[proposal] guide for customizing material component styles #6087

Closed willshowell closed 6 years ago

willshowell commented 6 years ago

Bug, feature request, or proposal:

Guide request

Contents

A guide that mentions the following:

  1. Overlay components typically allow passing a class/classes to the container or component. Encapsulated styles won't target them.
  2. Encapsulated styles will affect direct children of a component, but...
  3. To target children of a material component, you must do one of the following a. Turn off encapsulation on your component b. Add overriding styles to a global stylesheet c. Use deprecating shadow piercing
  4. Component styles are loaded when the component is instantiated, and will often come after your overriding styles, thus taking precedence. Be sure to increase specificity.

Motivation

There are a multitude of comments and questions from users about why material components aren't being targeted by their styles

https://github.com/angular/material2/issues/6013#issuecomment-317716398 https://github.com/angular/material2/issues/4522#issuecomment-318377411 https://github.com/angular/material2/issues/1276#issuecomment-316281456 https://github.com/angular/material2/issues/5849#issuecomment-317484775 https://github.com/angular/material2/issues/2624#issuecomment-290919946 https://github.com/angular/material2/issues/4034 https://github.com/angular/material2/issues/5050

Other

The point could be made that it isn't Material's responsibility to inform users about all this, but I get the impression that this library is the first place people turn after completing the TOH tutorial, and it would be good to at least point them to the relevant documentation.

jelbourn commented 6 years ago

This is something I'd like to have; it's one of the theoretical guides I have in mind (some others include: a broad a11y doc, how we approach i18n, AngularJS Material migration guide)

latchuk commented 6 years ago

That's will be awesome! I really tried customize the components, but until now I failed. This guide can help me and more people, to understand how do it right.

angular-automatic-lock-bot[bot] commented 4 years ago

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.