保持情绪的css prop值的参考连续性是否有明显的优势？

编程问答 2022-06-08

问题描述

我真的很喜欢Emotion的css API。在React中，我有时喜欢像这样将变量传递到CSS函数中：

import { InterpolationWithTheme } from '@emotion/core'
type Theme = { primaryColor: string }
type ThemedCssCreator = InterpolationWithTheme<Theme> // (theme: Theme) => css``

export const makeParagraphCss = (bgcolor: string): ThemedCssCreator => theme => css`
  color: ${theme.primaryColor};
  background-color: ${bgcolor};
`

然后在我的功能组件中：

return (<p css={makeParagraphCss(bgcolor)} />)

这会导致在每个渲染器上传递一个新引用作为css道具。

Emotion是否关心参考连续性？我正在考虑Emotion正确缓存生成的CSS类或类似类的功能。
我的练习是否存在性能上的缺陷？

像这样的对象文字呢？

return(<p css{{ color,backgroundColor }} />)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

emotionjavascriptperformancereactjsreactjstypescripttypescript