Can't overwrite existing style in component class-name using the className props

[AceTheCreator]

Problem

the class-name below exists in a component(Heading component) classNames = font-heading text-2xl font-bold tracking-heading md:text-6xl leading-snug ${className}

Now, when I'm using the heading component in my page, and I pass the className props as seen below <Heading level="h1" typeStyle="heading-xl" className="md:text-5xl"> </Heading>

I try passing a new font-size through the className props but it doesn't get applied because it couldn't overwrite the existing md:text-6xl in the component

Potential Solution

A potential I come across is to use https://www.npmjs.com/package/tailwind-merge so that you'll probably change some components' styles, but only in one place.

CC @magicmatatjahu @mcturco

[mcturco]

Hmmm I am curious about the use case for wanting to use md:text-5xl instead of the pre-set md:text-6xl? The reason why the styles were baked into these components is so that there will be no inconsistencies with typography.

But yeah I think showing an example of the issue in action would provide some better context as to how we might need to re-structure the components

[akshatnema]

Hey @AceTheCreator, we are already going to include tailwind-merge to resolve overlapping class conflicts in tailwind in PR #804. Do have a look into the PR and give your reviews.

[AceTheCreator]

Hmmm I am curious about the use case for wanting to use md:text-5xl instead of the pre-set md:text-6xl? The reason why the styles were baked into these components is so that there will be no inconsistencies with typography.

But yeah I think showing an example of the issue in action would provide some better context as to how we might need to re-structure the components

I understand the point you're making @mcturco. But in my case, I'm working on the community section prototype and I'm trying to use some of the existing components. So since I wanna use the heading component and the heading-xl font-size is too big and the heading-lg is too small, then something has to be done since I can't assign a custom font-size to the heading component

[mcturco]

@AceTheCreator Gotcha, that makes sense. Either way, I believe the intention of the Typography components was to make sure that new classes could override the base classes if they were applied into the className prop, so maybe we just have to adjust the components so that this is what happens. I would tag Maciej to have a look, but he is about to go on a 3 week vacation 😄

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart: