Styled Components v4 support

[deadcoder0904]

I was trying to use as prop to extend a Cosmos Component with some styles. But it threw an error.

So I looked into this repo & its using Styled Components v3. Is there any reason SC v4 not used yet?

[siddharthkp]

Hi :wave:

Can you post the use case you were using it for?

Also, it would help putting this issue in the right priority if you paste a link to the breaking changes with styled-components@4

[deadcoder0904]

I don't remember that particular use case now but it was for some customization like -

import styled from "@auth0/cosmos/styled";
import { Button } from "@auth0/cosmos";

const Component = styled.div`
    background-color: #dadada;
`;

<Component as={Button} />

I think this Medium post & this FAQ should provide all the breaking changes with styled-components@4

[siddharthkp]

There are a few breaking changes:

1. If you are using the .extend API, switch your components to use styled(StyledComponent) instead. (codemod available)
2. If you were using the innerRef prop, change it to a normal ref.
3. (maybe) If you're using the keyframes component in a partial without the css helper, you'll need to use the helper now. In general, always use the css helper when composing styling partials to be interpolated into a styled component.
4. If you're ussing attrs({}) and some of the attributes you pass to it is a Function, it's recommended to switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition.

Adding to the backlog as low priority.

[zeruk]

Hi!

I think this issue could be more prioritized, the React 17.x will be not compatible with old Styled Components.

Here is warning from React 16.12:

react-dom.development.js:12357 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Styled(Button), Styled(ReactSVG), Styled(styled.h2), Styled(styled.input), styled.button, styled.div, styled.form, styled.h2, styled.header, styled.img, styled.input, styled.label, styled.span