Incorrect Color Rendering in Collapsed State with ShowMore and LinkifyJS

[GramakovS]

When using the ShowMore component from the react-truncate library along with the LinkifyJS from linkify-react, the custom color styling for hashtags (#) and links inside the text does not apply while the ShowMore component is in the collapsed state. The color is applied correctly only after expanding the component.

See the attached screenshots for reference:
(wrapped both sides with ShowMore)

(left side without ShowMore wrapping — right side with ShowMore wrapping)


Collapsed state: Links and hashtags are not styled correctly. (Screenshot 1, right side)
Expanded state: Colors are applied correctly. (Screenshot 2, right side)

Steps to Reproduce:
Wrap a text containing hashtags (#) and/or links inside the ShowMore component.
Use the LinkifyJS component with a custom style (e.g., style={{ color: "red" }}).
Render the component and observe the styling in both collapsed and expanded states.

Expected Behavior:
The custom colors applied to LinkifyJS should be visible regardless of whether the ShowMore component is collapsed or expanded.

Actual Behavior:
In the collapsed state, the styles are not applied (hashtags and links are not red).
In the expanded state, the styles are applied correctly.

Code Example:

<ShowMore
  less={
    <button
      onClick={toggleLines}
      style={style}
    >
      ... less
    </button>
  }
  more={
    <button
      onClick={toggleLines}
      style={style}
    >
      ... more
    </button>
  }
>
    {/* Work correct without ShowMore wrapper */}
    <Linkify style={{ color: linksColor }}>{children}</Linkify>
</ShowMore>

[chengpeiquan]

It seems to be similar to this issue. #22