Can we apply styles like classnames

[afzalsayed96]

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')} />

...

[christianalfoni]

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 😄

[afzalsayed96]

Yes! An important decorator could also solve this.

[christianalfoni]

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! 👍

[afzalsayed96]

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

[christianalfoni]

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 😄

[christianalfoni]

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!