Inline JSX components aren't preserving the whitespace in MDX

HTML✅SOLVED

CSS

Hi, I have a static website that uses JSX components for inline elements. This is the HTML I'm returning:

export default function Component({text}) {
return (
  <a href="#" className="inline-block decoration-2 mb-1 nowrap">
    {icon}
    <span className="text-wrap break-words align-middle">{text}</span>
  </a>
)

export default function Component({text}) {
return (
  <a href="#" className="inline-block decoration-2 mb-1 nowrap">
    {icon}
    <span className="text-wrap break-words align-middle">{text}</span>
  </a>
)

The idea is to then use this component in an MDX file like so:

You can use <Component text="Ursol's Vortex"/> to prevent [...]
Don't focus the <Component text="Workshop Defender"/>s [...]

You can use <Component text="Ursol's Vortex"/> to prevent [...]
Don't focus the <Component text="Workshop Defender"/>s [...]

The issue here is that I can't seem to find a way to get a satisfactory spacing in both cases.

The current code seems to remove any space following the inline component, which works fine for when the

<Component>

<Component>

is followed by a punctuation mark or by a plural 's', but it makes the text unreadable when its followed by actual words.

I tried adding a margin-right, or a non-breaking space, but doing that breaks the other way around (the text becomes "Don't focus the Workshop Defender s")

Does anyone have any idea on how to solve it?

KP-C

Kevin Powell - Community•12mo ago•

1 reply

vinter.

Inline JSX components aren't preserving the whitespace in MDX

HTML✅SOLVED

CSS

Hi, I have a static website that uses JSX components for inline elements. This is the HTML I'm returning:

export default function Component({text}) {
return (
  <a href="#" className="inline-block decoration-2 mb-1 nowrap">
    {icon}
    <span className="text-wrap break-words align-middle">{text}</span>
  </a>
)

export default function Component({text}) {
return (
  <a href="#" className="inline-block decoration-2 mb-1 nowrap">
    {icon}
    <span className="text-wrap break-words align-middle">{text}</span>
  </a>
)

The idea is to then use this component in an MDX file like so:

You can use <Component text="Ursol's Vortex"/> to prevent [...]
Don't focus the <Component text="Workshop Defender"/>s [...]

You can use <Component text="Ursol's Vortex"/> to prevent [...]
Don't focus the <Component text="Workshop Defender"/>s [...]

<Component>

<Component>

Inline JSX components aren't preserving the whitespace in MDX

Similar Threads

Inline JSX components aren't preserving the whitespace in MDX

Similar Threads

Similar Threads

Similar Threads