在样式化组件中共享样式的惯用方式？

Question

试图将一些代码从 jss 移植到样式组件，jss 代码看起来像：

 //...
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>
  )
}

我的问题是，实现跨多个组件共享相同样式的惯用方法是什么？

原文由 tony_k 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以共享实际的 CSS 字符串或共享 styled-components 组件：

• 共享 CSS 字符串：

 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 */
`

• 分享实际 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 */
`

更新：根据评论中的问题，我创建了一个示例来说明将道具传递给样式组件的 css 函数的工作方式与将道具传递给组件本身的方式相同：https: //codesandbox.io/ s/2488xq91qj?字体大小=14 。 styled-components 的官方建议是始终将要传递给 styled-components 字符串包装在 css 标记函数中。在这个例子中， Test 组件通过嵌入在 cssString 变量中的传入道具接收背景和前景色—通过调用 css 函数创建的变量

原文由 Huy Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

除了发布的答案之外，您还可以创建一个接受 props / theme 并返回 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 ... */
`

原文由 Sagiv b.g 发布，翻译遵循 CC BY-SA 4.0 许可协议