material-yew icon indicating copy to clipboard operation
material-yew copied to clipboard

Feature proposal: Allow providing CSS classes for all components

Open techninja1008 opened this issue 3 years ago • 1 comments

Currently, the only way to add custom styles to a component is to use CSS selectors, which are either too broad (eg. using mwc-textfield will get all textfields) or require wrapping with an element annotated with a custom class (eg. using the rule .foo-class > mwc-textfield). This makes material-yew difficult to use with frameworks such as tailwindcss.com.

I propose a solution as follows: add a class property to all existing components. This would look similar to the following:

...
#[prop_or_default]
pub classes: Cow<'static, str>,
...

It would only be passed straight through to the underlying MWC component, so ideally each material-yew component would only have three lines of additions.

I'd be grateful to hear your thoughts on this - I'm happy to contribute such a change via a PR if you deem it to be suitable.

techninja1008 avatar Jun 04 '21 07:06 techninja1008

This would be a great addition but adding classes prop seems like a bandage over a much bigger issue, unable to pass props (such as classes) to components without defining everything manually. A actual solution was proposed for this here: https://github.com/yewstack/yew/issues/1533#issuecomment-683283324.

If you can, I think it would be great if you could work on that for Yew. I'd prefer to have this solved at framework-level instead of a putting a bandage over the problem.

ranile avatar Jun 13 '21 13:06 ranile