Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix array-based className handling to avoid comma separation in child elements #16

Merged
merged 1 commit into from
Jan 9, 2025

Conversation

szymonchudy
Copy link
Contributor

Hey there! First, thanks so much for all the work required to build and maintain this library.

When integrating it into my blog, I noticed that class names were not being applied correctly. Specifically, when child elements receive an array of class names (e.g., ["hljs-title", "function_"]), React currently renders them as a comma-separated string ("hljs-title,function_"), which brakes CSS. This issue can be seen on the provided demo page as well:

CleanShot 2024-12-28 at 17 23 41@2x

This PR ensures that any className arrays are joined with spaces ("hljs-title function_") instead.

CleanShot 2024-12-28 at 17 23 52@2x

Changes

  1. mapChild function checks if props.className is an array, and if so, joins it with a space.
  2. The expected behavior is covered with a separate test. All existing tests pass without regression.

@rexxars
Copy link
Owner

rexxars commented Jan 9, 2025

Oops. Thanks!

@rexxars rexxars merged commit 746e722 into rexxars:main Jan 9, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants