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

Question

试图将一些代码从 jss 移植到 styled-components，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 */
`

更新：基于评论中的问题，我创建了一个示例来显示将道具传递给样式组件的css功能与将道具传递给组件本身的方式相同：https ://codesandbox.io/s/2488xq91qj?fontsize=14 . 官方的建议styled-components是始终将您将传递给标签函数styled-components的字符串包装起来。css在这个例子中，Test组件通过传入的 props 接收它的背景色和前景色，这些 props 嵌入在cssString调用css函数创建的变量中。

Answer 2

除了发布的答案之外，您还可以创建一个接受props/theme并返回css``.

styled-components将检查提供的值的类型，例如：${shared}如果它是 a function，它将使用相关的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 ... */
`