Can we apply styles like classnames

[Afzal Sayed]

I stumbled upon a use case where I have to override a default library style applied inline to a component.

In this case the following doesn't work as inline styles applied by library have a higher precedence:

import Component from 'library';
import { c } from 'classy-ui';

...

<Component className={c('my-class')} />

...

Is it possible to have something like this where one can apply styles directly on a component instead of classnames:

import Component from 'library';
import { s } from 'classy-ui';

...

<Component style={s('my-class')} />

...

[Christian Alfoni]

Hi there @afzalsayed96 !

Technically we could do something like that, though it might be better to rather allow an important version. So:

<Component className={important('my-class')} />

That would keep things consistent and things like autoprefixer etc. would still operate on that CSS definition 😄

[Afzal Sayed]

Yes! An important decorator could also solve this.

[Christian Alfoni]

Okay, cool! I am in the middle of implementing something now, but will keep this in mind. Will not close until we have some solution to this. Thanks for bringing it up! 👍

[Afzal Sayed]

I can help in implementing this if you could point me in the right direction

[Christian Alfoni]

Thanks a bunch for wanting to contribute! We are still making big changes to the codebase, so just need to settle on the core first. We should be ready for contributions very soon 😄

[Christian Alfoni]

Hi there!

So things are settling now. This important decorator needs a custom implementation as it operates differently than all other decorators. It also needs some refactoring of the codebase as there is currently not possible to override to access the value at the point of decorators being applied. So yeah, it is on the list, but needs bigger worker to get it in 😄 Will keep you posted!