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

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

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

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

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

Answer 2

除了已发布的答案之外，您还可以创建一个接受 props / theme 和 returns 和 css`` 的函数。

styled-components 将检查提供的值的类型，例如：${shared}，如果它是 function，它将使用相关的 props / [=12 调用它=].

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

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

idiomatic way to share styles in styled-components?

javascript

styled-components

jss