[英]idiomatic way to share styles in styled-components?
trying to port some code from jss to styled-components, jss code looks something like:试图将一些代码从 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>
)
}
my question is what would be the idiomatic way to accomplish this sharing of the same styles across multiple components?我的问题是实现跨多个组件共享相同样式的惯用方式是什么?
You can either share actual CSS strings or share styled-components
components:您可以共享实际的 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
: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 */
`
Update: Based on questions in the comments, I created an example to show that passing props to styled-components's css
function works the same way as passing props to the components themselves: https://codesandbox.io/s/2488xq91qj?fontsize=14 .更新:基于评论中的问题,我创建了一个示例来说明将道具传递给 styled-components 的
css
函数的工作方式与将道具传递给组件本身的方式相同: https ://codesandbox.io/s/2488xq91qj?fontsize= 14 . The official recommendation from styled-components
is to always wrap strings you will pass to styled-components
in the css
tag function. styled-components
的官方建议是始终在css
标记函数中包装您将传递给styled-components
的字符串。 In this example, the Test
component receives it background and foreground colors through passed-in props embedded in the cssString
variable created by invoking the css
function.在此示例中,
Test
组件通过调用css
函数创建的cssString
变量中嵌入的传入道具接收它的背景色和前景色。
In addition to the posted answer, you can also create a function that accepts props
/ theme
and returns the css``
.除了发布的答案之外,您还可以创建一个接受
props
/ theme
并返回css``
的函数。
styled-components
will check the type of the value provided eg: ${shared}
and if its a function
it will invoke it with the relevant props
/ theme
. 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 ... */
`
In addition to the 2 answers above, you can also share style between tags as such:除了上面的 2 个答案,您还可以在标签之间共享样式,如下所示:
const MyText = styled.div`
color: orange;
`
const MyLink = MyText.withComponent("a")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.