Styled-components v4 not compatible with Atlaskit

I need to upgrade to styled-components v4 because new packages added to my project use it (i.e. reactour).

I am getting the following build warnings and there a multiple UI errors when running with v4:

npm WARN @atlaskit/calendar@9.2.10 requires a peer of styled-components@^3.2.6 but none is installed. You must install peer dependencies yourself.

Similar warnings for:: @atlaskit/icon@20.1.2, @atlaskit/theme@10.0.4, etc…

Is there a workaround for this?

Any advice would be helpful.

I updated all my components to the latest versions and have the following 2 errors so far:

  1. @atlaskit/dropdown-menu clicking on menu item does not work

Note, component @atlaskit/dropdown-menu uses component @atlaskit/droplist which is being deprecated

Console message:
The “innerRef” API has been removed in styled-components v4 in favor of React 16 ref forwarding, use “ref” instead like a typical component. “innerRef” was detected on component “Droplist__Trigger”

As a work around I changed Droplist.js (in node modules) replacing (2 instances) innerRef with ref.
I would like to see the package updated with similar change.

  1. InlineDialog component shows the dialog in the upper left corner.

Console message:
StyleSheetManager.js:31 The “innerRef” API has been removed in styled-components v4 in favor of React 16 ref forwarding, use “ref” instead like a typical component. “innerRef” was detected on component “styled.div”.

I am aware these packages will switch over to emotion, but in the meantime can atlaskit update the packages for these 2 items.

I would greatly appreciate this or any advice would be helpful.

Hi @EdwardL, are you able to try using styled-components v5?

Hi @MattCharlton, no I did not try v5.

Since we had to deliver the software quickly, I ended up using another package @reach/menu-button for the non-working UI components.

I will try your suggestion in the future.

Thanks