我刚刚开始使用 emotion与 react-jss 合作后在几年里。我正在努力寻找一个很好的例子的一件事是将(一些，可能是动态的)样式传递给子组件。在 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 中使用它们。 prop，将它们与子组件需要的任何其他样式组合起来。
情感确实允许同样的事情发生，但我无法弄清楚他们期望你如何做到这一点。
从语义上来说，在子端，它看起来像 styled tagged template literal接受emotion样式并传递 className prop 给子级，然后它的工作方式与在react-jss 中相同。但是，我找到了styled语法极其丑陋且难以解析。我不想用可能不同的 styled 来填充我的父文件HOC 包装的子组件。
从功能上来说，这似乎是传递我自己的 emotion 属性样式以及在子组件中组合这些样式最接近地反射(reflect) react-jss ，但我在情感文档中找不到任何示例表明这是他们希望您做的事情。这不是禁止的或任何东西，只是没有突出显示。像下面这样的事情有意义吗？
// 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样式化的组件模式正是处理这些东西的方法？请让我知道您是如何解决这个问题的，或者向我指出我已经查看过的文档。非常感谢!
最佳答案
以防万一有人稍后发现这篇文章，我运行了自己的测试，比较了创建 1000 个 p 标签并根据其索引为它们着色时每种方法的性能。
styled 性能最高，ClassNames 性能第二(其最佳性能通常与 styled 性能的下限相匹配) )。直接传递 css 标记的模板文字比其他两者都要差得多，性能比 styled 最差的性能差 1.5 到 2 倍。
通过传递 props 进行条件样式绝对比静态样式慢，并且使用 prop filtering对于 styled 与不过滤相比，只会稍微降低性能(如果这是一个潜在问题，这可能是一个很好的权衡，可以防止不必要的重新渲染)。
关于reactjs - 在 React 和 Emotion JS 中将样式传递给子级的首选方式是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65278945/