idiomatic way to share styles in styled-components?

Question

trying to port some code from jss to styled-components, jss code looks something like:

//... const styles = {   myStyles: {     color: 'green'   } }  const {classes} = jss.createStyleSheet(styles).attach()  export default function(props) {   return (      <div>        <Widget1 className={classes.myStyles}/>        <Widget2 className={classes.myStyles}/>      </div>   ) } 

my question is what would be the idiomatic way to accomplish this sharing of the same styles across multiple components?

Answer 1

You can either share actual CSS strings or share styled-components components:

• Share CSS strings:

import {css} from 'styled-components' const sharedStyle = css`   color: green `  // then later  const ComponentOne = styled.div`   ${sharedStyle}   /* some non-shared styles */ ` const ComponentTwo = styled.div`   ${sharedStyle}   /* some non-shared styles */ ` 

• Share actual styled-components:

const Shared = styled.div`   color: green; `  // ... then later  const ComponentOne = styled(Shared)`   /* some non-shared styles */ ` const ComponentTwo = styled(Shared)`   /* some non-shared styles */ ` 

Update: Based on questions in the comments, I created an example to show that passing props to styled-components's css function works the same way as passing props to the components themselves: https://codesandbox.io/s/2488xq91qj?fontsize=14. The official recommendation from styled-components is to always wrap strings you will pass to styled-components in the css tag function. In this example, the Test component receives it background and foreground colors through passed-in props embedded in the cssString variable created by invoking the css function.