cosmos
cosmos copied to clipboard
Styled Components v4 support
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?
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
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
There are a few breaking changes:
- If you are using the .extend API, switch your components to use styled(StyledComponent) instead. (codemod available)
- If you were using the innerRef prop, change it to a normal ref.
- (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.
- 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.
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