Issue with Tailwind CSS className Styles Not Being Applied to TransactionButton

[seangray-dev]

I am encountering an issue with the TransactionButton component where Tailwind CSS classes passed through the className prop do not seem to apply. Despite providing custom Tailwind utility classes, the button does not reflect these styles, and it appears that default styles are taking precedence or the Tailwind classes are being ignored altogether.

Thank you for looking into this issue. I am happy to provide further details if needed and look forward to a resolution.

[joaquim-verges]

@seangray-dev try setting the tailwind properties as !important by prefixing them with a !

[seangray-dev]

@seangray-dev try setting the tailwind properties as !important by prefixing them with a !

@joaquim-verges Thanks for your response! Was literally just about to update my comment. Tried this it does indeed work.

Is there a more permanent fix potentially that avoids the use of !important being discussed? I'd be interested in investigating further.

[joaquim-verges]

Agreed that it would be great to not require that. And we should at a minimum document it.

The code is all open so feel free to make a PR to fix this! Cc @MananTank

[seangray-dev]

I'd be happy to look at finding a solution and contributing, please assign this to me if you'd like. Also, I believe there are other ui components with similar behaviour as well. I will report back on this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gregfromstl]

Hi @seangray-dev, sorry for the delay getting back to you here. PRs are always welcome if you're able to find a solution to this!

The reason for the issue is the current components use Styled Components, and their generated CSS class takes precedence over any other classes. The current options are to add regular inline CSS styles to override or add the !important flag as mentioned. We're planning on migrating the component styles to another option in the future which will hopefully fix this.