bug(mat-radio): styles are overcomplicated and repeated many times.

[liesahead]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

V14

Description

It adds confusion when exploring styles in devtools inspector, also adds problem if we need to override something. Not related to just radio component, but it is at least one of them.

Reproduction

Steps to reproduce:

1. Open demo/docs page;
2. Open devtools;
3. See styles for .mdc-radio element.

Expected Behavior

Less style repeats, possibility to override easier?

Actual Behavior

Too much duplicated CSS

Environment

Angular CLI: 15.1.6
Node: 18.14.0
Package Manager: yarn 3.3.0
OS: win32 x64

Angular: 15.1.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1501.6
@angular-devkit/build-angular 15.1.6
@angular-devkit/build-ng-packagr 0.1002.4
@angular-devkit/core 15.1.6
@angular-devkit/schematics 15.1.6
@angular/cli 15.1.6
@schematics/angular 15.1.6
rxjs 7.8.0
typescript 4.9.5

[wagnermaciel]

This can be avoided by being careful how you pull in the styles for your application:
https://material.angular.io/guide/theming#applying-a-theme-to-components

I'm not sure why exactly the docs site pulls in the radio button's styles multiple times, but if you'd like to file an issue for us to optimize the styles in the docs site, you'll need to file an issue here:
https://github.com/angular/material.angular.io

If it turns out some styles are being generated multiple times by one of our mixins, feel free to reopen an issue

[angular-automatic-lock-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.}