【发布时间】：2021-03-24 11:57:07
【问题描述】：
在使用react-jss 几年后，我才刚刚开始使用emotion。我正在努力寻找一个很好的例子的一件事是将（一些，可能是动态的）样式传递给子组件。在react-jss 中，这非常简单：
// In SomeParent.jsx
... imports etc ...
const useStyles = createUseStyles({
custom: {
color: 'blue',
},
})
export const CustomBody = () => {
const classes = useStyles()
return <Body className={classes.custom}>some text</Body>
}
// In Body.jsx
... imports etc...
const useStyles = createUseStyles({
body: {
fontSize: 16,
color: 'black',
},
})
const Body = ({ children, className }) => {
const classes = useStyles()
return (
<p
className={clsx(
classes.body,
className,
)}
>
{children}
</p>
)
}
本质上，父组件可以创建样式并通过 prop（通常为 className ）将任意数量的相关类名传递给子组件，然后子组件可以在自己的 className 属性中使用它们，并将它们与任何其他样式结合起来子组件需要。
情绪确实允许同样的事情，但我不知道他们如何期望你这样做。
在子方面的语义上，styled tagged template literal 似乎接受了emotion 样式并将className 属性传递给子级，然后它的工作方式与在 react-jss 中的工作方式相同。但是，我发现styled 语法非常丑陋且难以解析。我宁愿不用styled HOC 包装的子组件填充我的父文件。
从功能上讲，似乎传递了我自己的 emotion 样式属性并在子组件中组合这些样式最接近于 react-jss，但我在情感文档中找不到任何示例表明这是他们的东西期待你做。它不是 FORBIDDEN 或任何东西，只是没有突出显示。像下面这样的东西有意义吗？
// In SomeParent.jsx
... imports etc ...
export const CustomBody = () => {
return <Body customStyles={css`color: blue`}>some text</Body>
}
// In Body.jsx
... imports etc...
const bodyStyles = css`
font-size: 16px;
color: black;
`
const Body = ({ children, customStyles }) => {
return (
<p
css={css`
${bodyStyles};
${customStyles};
`}
>
{children}
</p>
)
}
composition documentation 明确表明这将起作用（并且确实如此），但它并没有像styled 文档那样专门展示从一个组件到另一个组件的传递样式。这对我来说感觉更好，但我担心the note in the string styles documentation 指出css 不返回类字符串，而是返回一个完整的对象，该对象“在低层次上被情感理解”。如果emotion 没有记住这个对象（我自己还没有测试过），那么我最终会得到一堆不必要的重新渲染。我可以记住作为该对象一部分包含的类名字符串，但我也不确定这是否一致。
最后可能相关的是class names API。看起来这将允许我创建一个样式并将其作为className 字符串传递给子组件（很像react-jss 并避免重新渲染问题），但同样，必须包装每个子组件在ClassNames 组件中接受来自父级的样式，然后处理渲染函数似乎很疯狂。
我只是在这里遗漏了什么吗？全世界都接受styled 并且样式化的组件模式就是使用这些东西的方式吗？请让我知道您是如何解决此问题的，或将我指向我看过的文档。非常感谢！
【问题讨论】：