docs(material/theming): revise customizing-component-styles #22466

jelbourn · 2021-04-12T23:11:07Z

This change updates the customizing-component-styles doc to give more
specific guidance on overriding component styles. In particular:

Much stronger language to make it clear that this is not supported or
recommended.
Reorganize content such that topics have a bit more cohesion/flow
Call out that layout/positioning styles on host elements are the only
safe styles to apply.
Emphasize the perils of overrides in general

twerske

minor comments - lgtm overall!

guides/customizing-component-styles.md

twerske · 2021-04-14T21:21:58Z

guides/customizing-component-styles.md

 [Angular documentation](https://angular.io/guide/component-styles#view-encapsulation). You may
-also wish to take a look at
+also wish to take a review
 [_The State of CSS in Angular_](https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700)


We're probably due for an update on The State of CSS in Angular with these new changes, this article is a bit dated (both date and content).

Yeah, we should probably update our guidance once we drop IE11 support and we can throw our weight behind css variables (and maybe constructible stylesheets will be a thing by then, too)

This change updates the customizing-component-styles doc to give more specific guidance on overriding component styles. In particular: * Much stronger language to make it clear that this is not supported or recommended. * Reorganize content such that topics have a bit more cohesion/flow * Call out that layout/positioning styles on host elements are the only safe styles to apply. * Emphasize the perils of overrides in general

TeriGlover

Editing review; a few minor suggestions.

TeriGlover · 2021-04-20T16:13:26Z

guides/customizing-component-styles.md

+### Component host elements
+
+For any Angular Material component, you can safely define custom CSS for a component's host element
+that affect the positioning or layout of that component, such as `margin`, `position`, `top`,


Suggested change

that affect the positioning or layout of that component, such as `margin`, `position`, `top`,

that affects the positioning or layout of that component, such as `margin`, `position`, `top`,

TeriGlover · 2021-04-20T16:15:21Z

guides/customizing-component-styles.md

+
+### Internal component elements
+
+Avoid any custom styles or overrides on internal elements within a Angular Material components.


Suggested change

Avoid any custom styles or overrides on internal elements within a Angular Material components.

Avoid any custom styles or overrides on internal elements within Angular Material components.

Removed stray word.

TeriGlover · 2021-04-20T16:18:52Z

guides/customizing-component-styles.md

 [Angular documentation](https://angular.io/guide/component-styles#view-encapsulation). You may
-also wish to take a look at
+also wish to review


Suggested change

also wish to review

also want to review

The developer documentation style guide says to avoid this term.

TeriGlover · 2021-04-20T16:23:18Z

guides/customizing-component-styles.md

-// Add this to your global stylesheet after your theme setup
-.myapp-no-padding-dialog .mat-dialog-container {
-  padding: 0;
+// Add this to your global stylesheet after including theme mixins.


Suggested change

// Add this to your global stylesheet after including theme mixins.

// Add this to your global style sheet after including theme mixins.

Two words

TeriGlover · 2021-04-20T16:24:01Z

guides/customizing-component-styles.md

+affect the elements explicitly defined in your template. To affect descendants of components used
+in your template, you can use one of the following approaches:
+
+1. Define custom styles in a global stylesheet declared in the `styles` array of your `angular.json`


Suggested change

1. Define custom styles in a global stylesheet declared in the `styles` array of your `angular.json`

1. Define custom styles in a global style sheet declared in the `styles` array of your `angular.json`

Two words

TeriGlover · 2021-04-20T20:10:03Z

Editing review completed; a few minor suggestions.

…

On Fri, Apr 16, 2021 at 4:31 PM Jeremy Elbourn ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In guides/customizing-component-styles.md <#22466 (comment)>: > [Angular documentation](https://angular.io/guide/component-styles#view-encapsulation). You may -also wish to take a look at +also wish to take a review [_The State of CSS in Angular_](https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700) Yeah, we should probably update our guidance once we drop IE11 support and we can throw our weight behind css variables (and maybe constructible stylesheets will be a thing by then, too) — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#22466 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR4DPGQN6GDL355BXMTE233TJDCGLANCNFSM422GSROQ> .

-- *--Teri Glover--* *Technical Editor*

This change updates the customizing-component-styles doc to give more specific guidance on overriding component styles. In particular: * Much stronger language to make it clear that this is not supported or recommended. * Reorganize content such that topics have a bit more cohesion/flow * Call out that layout/positioning styles on host elements are the only safe styles to apply. * Emphasize the perils of overrides in general (cherry picked from commit 52ac1e4)

angular-automatic-lock-bot · 2021-05-22T00:03:27Z

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

jelbourn added P2 The issue is important to a large percentage of users, with a workaround docs This issue is related to documentation merge safe target: major This PR is targeted for the next major release area: theming labels Apr 12, 2021

jelbourn requested review from crisbeto, mmalerba, twerske and TeriGlover April 12, 2021 23:11

google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 12, 2021

jelbourn force-pushed the customizing-component-styles branch from abd4797 to 9330875 Compare April 12, 2021 23:15

jelbourn added target: rc This PR is targeted for the next release-candidate and removed target: major This PR is targeted for the next major release labels Apr 14, 2021

twerske approved these changes Apr 14, 2021

View reviewed changes

jelbourn force-pushed the customizing-component-styles branch from 9330875 to a3a83c6 Compare April 16, 2021 23:32

jelbourn added the action: merge The PR is ready for merge by the caretaker label Apr 16, 2021

TeriGlover approved these changes Apr 20, 2021

View reviewed changes

wagnermaciel merged commit 52ac1e4 into angular:master Apr 21, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators May 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs(material/theming): revise customizing-component-styles #22466

docs(material/theming): revise customizing-component-styles #22466

Uh oh!

jelbourn commented Apr 12, 2021

Uh oh!

twerske left a comment

Uh oh!

Uh oh!

Uh oh!

twerske Apr 14, 2021

Uh oh!

jelbourn Apr 16, 2021

Uh oh!

TeriGlover left a comment

Uh oh!

TeriGlover Apr 20, 2021

Uh oh!

TeriGlover Apr 20, 2021

Uh oh!

TeriGlover Apr 20, 2021

Uh oh!

TeriGlover Apr 20, 2021

Uh oh!

TeriGlover Apr 20, 2021

Uh oh!

TeriGlover commented Apr 20, 2021 via email

Uh oh!

angular-automatic-lock-bot bot commented May 22, 2021

Uh oh!

Uh oh!

	that affect the positioning or layout of that component, such as `margin`, `position`, `top`,
	that affects the positioning or layout of that component, such as `margin`, `position`, `top`,


		### Internal component elements

		Avoid any custom styles or overrides on internal elements within a Angular Material components.

	// Add this to your global stylesheet after including theme mixins.
	// Add this to your global style sheet after including theme mixins.

	1. Define custom styles in a global stylesheet declared in the `styles` array of your `angular.json`
	1. Define custom styles in a global style sheet declared in the `styles` array of your `angular.json`

docs(material/theming): revise customizing-component-styles #22466

docs(material/theming): revise customizing-component-styles #22466

Uh oh!

Conversation

jelbourn commented Apr 12, 2021

Uh oh!

twerske left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

twerske Apr 14, 2021

Choose a reason for hiding this comment

Uh oh!

jelbourn Apr 16, 2021

Choose a reason for hiding this comment

Uh oh!

TeriGlover left a comment

Choose a reason for hiding this comment

Uh oh!

TeriGlover Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

TeriGlover Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

TeriGlover Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

TeriGlover Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

TeriGlover Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

TeriGlover commented Apr 20, 2021 via email

Uh oh!

angular-automatic-lock-bot bot commented May 22, 2021

Uh oh!

Uh oh!