idiomatic way to share styles in styled-components?

こ雲淡風輕ζ 提交于 2021-02-15 11:15:54

问题


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?


回答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.




回答2:


In addition to the posted answer, you can also create a function that accepts props / theme and returns the css``.

styled-components will check the type of the value provided eg: ${shared} and if its a function it will invoke it with the relevant props / theme.

import styled, {css} from 'styled-components';

const shared = ({theme, myProp}) => css`
  color: ${theme.color};
`

/* ------------   */

const Component1 = styled.div`
  ${shared};
  /* more styles ... */
`
const Component2 = styled.div`
  ${shared};
  /* more styles ... */
`


来源:https://stackoverflow.com/questions/49618997/idiomatic-way-to-share-styles-in-styled-components

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!