代码之家 › 专栏 › 技术社区 › tony_k

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

jss styled-components javascript

65

tony_k · 技术社区 · 7 年前

尝试将一些代码从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>
  )
}

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

2 回复 | 直到 5 年前

1

140

Mosh Feu Alex Chen 5 年前

您可以共享实际的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 */
`

实际份额 样式化组件 :

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 。官方建议 样式化组件 总是将要传递给的字符串打包 样式化组件 在 css 标记功能。在本例中 Test 组件通过嵌入在 cssString 通过调用 css 作用

2

30

David Harkness 4 年前

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

styled-components 将检查所提供值的类型,例如: ${shared} 如果是 function 它将使用相关的 道具 / 主题 。

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