I didn’t want to use injectGlobal as suggested in another answer because I needed to make the transitions different per component. It turns out to be pretty easy – just nest the transition classes in the styling for the component: import React from “react”; import CSSTransitionGroup from ‘react-transition-group/CSSTransitionGroup’; import styled from ‘styled-components’; const appearDuration = … Read more
For React SVG background images, I find this works best: // MyComponent.js import mySvg from ‘./mySvg.svg’; … function MyComponent() { return ( <div className=”someClassName” style={{ backgroundImage: `url(${mySvg})` }} > … etc The path to the SVG file will change when webpack bundles, so by using the template string you can keep things linked up. In … Read more
As of styled-components v2 you can interpolate other styled components to refer to their automatically generated class names. In your case you’ll probably want to do something like this: const Container = styled.div` &:hover ${Kid} { display: none; } ` See the documentation for more information! This is copy and pasted from my answer here.
You can just do like this: const FlexContainer = styled.div` display: flex; flex-direction: column; justify-content: flex-start; `; const FlexContainerExtended = styled(FlexContainer)` flex-direction: column-reverse; `;
As stated in documentation: The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element. Example // This could be react-router-dom’s Link for example, or any custom component const Link = ({ className, children }) => ( <a className={className}> … Read more
2020 UPDATE: Use transient props With the release 5.1.0 you can use transient props. This way you do not need an extra wrapper i.e. unnecessary code is reduced: Transient props are a new pattern to pass props that are explicitly consumed only by styled components and are not meant to be passed down to deeper … Read more
There have been some recent developments and with a new version of Typescript (eg. 3.0.1) and styled-components (eg. 3.4.5) there’s no need for a separate helper. You can specify the interface/type of your props to styled-components directly. interface Props { onPress: any; src: any; width: string; height: string; } const Icon = styled.Image<Props>` width: ${p … Read more
If you create a component: <DeliverNow> </DeliverNow> it automatically receives props. When you declare it: const DeliverNow = () => {} TypeScript will tell you that they don’t match, since in reality, DeliverNow receives props. It should actually be: const DeliverNow = (props:any) => {}
I’ve been using SCSS (SASS) for many years now, and also have been using Styled-Components for a few projects, some large. I love both, and Styled-Components feels, for me, like a step forward: Styled-Components – Pros Total styling isolation; prevents potential bugs when working in teams, when one team member can never override a style … Read more
you need to add a role props in your a tag to avoid this warning, for example a button <a role = “button” styling=”link” onClick={() => this.gotoLink()}> <SomeComponent /> </a> I guess it is because the HREF props is missing in your anchor tag (not sure)