Broken Semantic UI React components when using 'as' attribute

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz
• Memory: 85.07 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.4.0 - ~/.nvm/versions/node/v10.4.0/bin/node
• Yarn: 1.7.0 - ~/.nvm/versions/node/v10.4.0/bin/yarn
• npm: 6.1.0 - ~/.nvm/versions/node/v10.4.0/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• styled-components: ^4.0.3 => 4.0.3

Reproduction

Use Styled to any Semantic UI component with attr as, that render another component inside <StyledGrid as={Container}> <Grid.Row > <Grid.Column>1</Grid.Column> <Grid.Column>2</Grid.Column> <Grid.Column>4</Grid.Column> </Grid.Row> </StyledGrid> In examples you can find full code base

Expected Behavior

Working example with styled-components 3.4.10 https://codesandbox.io/s/r70yl2xmzo

Actual Behavior

Broken example with styled-components 4.0.3 https://codesandbox.io/s/l5xyr1k34l

Comparison between differenet versions

DOM

In result in newer version final div rendered to DOM doesn’t have all classes <div class="ui container sc-EHOje iCsTWd">

instead of having <div class="ui container ui grid sc-gPEVay kjGIgn">

ui and grid ommitted.

React tree

If look into react DOM tree:

That’s old working version 3.*

That’s broken 4.*

Component Grid is absent here. Any thoughts what could cause it and how to fix?

thanks

[kwayebopp]

I suffered from the same problem, but I found that if I styled the component passed to as, the styling was repaired.

In my use case I was trying to style <Sidebar as={Menu}>.

this worked in 3.x, but failed in 4.x:

const StyledSidebar = styled(Sidebar)`...`;

<StyledSidebar as={Menu}>

and here was my solution:

const StyledMenu = styled(Menu)`...`;

<Sidebar as={StyledMenu}>

[kitten]

Please refer with usage questions to Stack Overflow, as you’re more likely to get quicker and helpful answers there ❤️ Repository issues on GitHub are great for that, issues, things that need to be resolved in the library itself, or can’t be resolved by anyone but the maintainers. While I (and many others on other repos) are happy to eventually answer usage questions, styled-components is a busy repo and mostly stable and slow moving towards new releases, so you’re not likely to get fast responses here