![](/img/trans.png)
[英]use styled-components to share styles between components/elements
[英]idiomatic way to share styles in styled-components?
试图将一些代码从 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>
)
}
我的问题是实现跨多个组件共享相同样式的惯用方式是什么?
您可以共享实际的 CSS 字符串或共享styled-components
组件:
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 */
`
更新:基于评论中的问题,我创建了一个示例来说明将道具传递给 styled-components 的css
函数的工作方式与将道具传递给组件本身的方式相同: https ://codesandbox.io/s/2488xq91qj?fontsize= 14 . styled-components
的官方建议是始终在css
标记函数中包装您将传递给styled-components
的字符串。 在此示例中, Test
组件通过调用css
函数创建的cssString
变量中嵌入的传入道具接收它的背景色和前景色。
除了发布的答案之外,您还可以创建一个接受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 个答案,您还可以在标签之间共享样式,如下所示:
const MyText = styled.div`
color: orange;
`
const MyLink = MyText.withComponent("a")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.