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字符串：

＆＃13;

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

＆＃13;

分享实际styled-components：

＆＃13;

const Shared = styled.div`
  color: green;
`

// ... then later

const ComponentOne = styled(Shared)`
  /* some non-shared styles */
`
const ComponentTwo = styled(Shared)`
  /* some non-shared styles */
`

＆＃13;

更新：基于评论中的问题，我创建了一个示例，表明将props传递给样式组件的css函数的工作方式与将props传递给组件本身的方式相同：{{3 }}。 styled-components的官方建议是始终将您传递给styled-components标记函数中的css的字符串换行。在此示例中，Test组件通过嵌入在通过调用cssString函数创建的css变量中的传入道具接收背景和前景色。

Answer 2

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

styled-components将检查所提供的值的类型，例如：${shared}，如果其值为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 ... */
`

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

2 个答案: