时间戳

首页 > 解决方案 > 在 React & Emotion JS 中将样式传递给孩子的首选方式是什么？

reactjs - 在 React & Emotion JS 中将样式传递给孩子的首选方式是什么？

问题描述

在使用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）将任意数量的相关类名传递给子组件，然后子组件可以在自己的classNameprop 中使用它们，将它们与子组件所需的任何其他样式结合起来。

情绪确实允许同样的事情，但我不知道他们希望你怎么做。

在子方面的语义上，样式标记的模板字面量似乎接受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>
  )
}

组合文档清楚地表明这将起作用（并且确实如此），但它并没有像文档那样专门展示从一个组件到另一个组件的传递样式styled。这对我来说感觉更好，但我担心字符串样式文档中的注释指出css它不返回类字符串，而是返回一个“被低级别的情感理解”的完整对象。如果这个对象没有被emotion（我自己还没有测试过）记忆，那么我最终会得到一堆不必要的重新渲染。我可以记住作为该对象一部分包含的类名字符串，但我也不确定这是否一致。

可能相关的最后一件事是类名 API。看起来这将允许我创建一个样式并将其作为className字符串传递给子组件（很像 inreact-jss并避免重新渲染问题），但同样，必须包装每个接受父样式的子组件在ClassNames组件中然后处理渲染函数似乎很疯狂。

我只是在这里遗漏了什么吗？全世界是否都接受了这一点styled，而样式化的组件模式正是使用这些东西的方式？请让我知道您是如何解决此问题的，或者将我指向我看过的文档。非常感谢！

标签： reactjsemotioncss-in-js

解决方案

万一以后有人发现这篇文章，我进行了自己的测试，比较了在创建 1000 p 个标签并根据它们的索引为它们着色时每种方法的性能。

styled是最高性能的，是第二高性能的（其最佳性能通常与's 性能ClassNames的低端匹配）。styled直接传递css标记的模板文字比其他两个要差得多，性能比styled最差的性能差 1.5 倍到 2 倍。

通过传递道具进行有条件的样式设置绝对比静态样式慢，并且使用道具过滤仅styled比不过滤降低性能一小部分（如果这是一个潜在问题，可能是防止不必要的重新渲染的一个很好的权衡）。

推荐阅读