Custom Classes for individual Components

[BobserLuck]

Is your feature request related to a problem? Please describe.
Not directly. Though when trying to target a Mesop/Material component for custom .css formatting, it gets a little messy.

Describe the solution you'd like
Extend the classes='' parameter that me.Box() has to other components directly for easier identification in the DOM and applying custom formatting.

Describe alternatives you've considered
You can put the component you mean to change inside it's own me.Box() component with a custom class there, and then target the child Mesop/Material component in css. However, it makes some issues with nested Boxes and requires alot of extra boxes. You also then need to know exactly which Material component is being rendered.

Mesop does have a custom key='' parameter that almost all Components support, but that is usually a span that's not a parent of the component you mean to target.

Mesop has it's own me.Style() method, but it doesn't always play nicely with Material components.

Additional context
I want to change the background color of a drop down selection. The me.Style() atribute does have an option for background color, but doesn't appropriately change the Material .css variable that's controlling the color, and instead leads to rectangle that stretches out of bounds of the Material component.

I can change the color on my own via a custom .css file, but targeting the component is a bit of a hassle since the closest I can get to hitting the component in the DOM is a wrapped box. Then I have to figure the exact rendered name of the Material component I'm targetting.

You get a box! And you get a box! You all get boxes!

[richard-to]

Thanks for the feedback on this. We were hoping that having classes on box would be enough. So it's good to hear the pain points here.

I'm not 100% sure adding a classes parameter to all components will solve the issue completely. I think it will help and maybe it's a good intermediate step.

I think it would be good if there was some way to provide a custom material css file and override the default one we provide to provide better themeability in general. But haven't thought about it too much.

Probably need to think about the options here. But I agree with you that the style property is insufficient in a fair amount of use cases for styling the Angular components.