javascript 在样式组件中共享样式的惯用方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49618997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
idiomatic way to share styles in styled-components?
提问by tony_k
trying to port some code from jss to styled-components, jss code looks something like:
尝试将一些代码从 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>
)
}
my question is what would be the idiomatic way to accomplish this sharing of the same styles across multiple components?
我的问题是，在多个组件之间共享相同样式的惯用方法是什么？
回答by Huy Nguyen
You can either share actual CSS strings or share styled-componentscomponents:
您可以共享实际的 CSS 字符串或共享styled-components组件：
- Share CSS strings:
- 共享 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 */
`
- Share actual
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 cssfunction works the same way as passing props to the components themselves: https://codesandbox.io/s/2488xq91qj?fontsize=14. The official recommendation from styled-componentsis to always wrap strings you will pass to styled-componentsin the csstag function. In this example, the Testcomponent receives it background and foreground colors through passed-in props embedded in the cssStringvariable created by invoking the cssfunction.
更新：根据评论中的问题，我创建了一个示例，以表明将 props 传递给 styled-components 的css功能与将 props 传递给组件本身的工作方式相同：https: //codesandbox.io/s/2488xq91qj?fontsize=14. 来自官方的建议styled-components是始终将您将传递给的字符串包装styled-components在css标签函数中。在这个例子中，Test组件通过嵌入在cssString通过调用css函数创建的变量中的传入 props 接收它的背景和前景色。
回答by Sagiv b.g
In addition to the posted answer, you can also create a function that accepts props/ themeand returns the css``.
除了发布的答案之外，您还可以创建一个接受props/theme并返回css``.
styled-componentswill check the type of the value provided eg: ${shared}and if its a functionit will invoke it with the relevant props/ theme.
styled-components将检查提供的值的类型，例如：${shared}如果是 afunction它将使用相关的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 ... */
`
