Reactjs 在React&；情感JS？_Reactjs_Emotion_Css In Js

Reactjs 在React&；情感JS？

reactjs

Reactjs 在React&；情感JS？,reactjs,emotion,css-in-js,Reactjs,Emotion,Css In Js,在工作了几年后，我才刚刚开始。我一直在努力寻找一个很好的例子，那就是将（一些，可能是动态的）样式传递给子组件。在react jss中，这是一个非常简单的问题： // In SomeParent.jsx ... imports etc ... const useStyles = createUseStyles({ custom: { color: 'blue', }, }) export const CustomBody = () => { const classes

在工作了几年后，我才刚刚开始。我一直在努力寻找一个很好的例子，那就是将（一些，可能是动态的）样式传递给子组件。在

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>
  )
}

说明了这将起作用（它确实起作用），但它并没有像

样式化的文档那样专门展示从一个组件到另一个组件的传递样式。这让我感觉更好，但我担心的是，css
不会返回类字符串，而是返回一个完整的对象，该对象“在低层次上被情感理解”。如果这个对象没有被情感
记忆（我自己还没有测试过），那么我最终会得到一堆不必要的重新渲染。我可以对作为该对象一部分包含的类名字符串进行记忆，但我也不确定这是否一致
最后一件可能相关的事情是。看起来这将允许我创建一个样式，并将其作为className
字符串传递给子组件（非常类似于react jss
并避免重新渲染问题），但是，在ClassNames
组件中，必须包装每个接受父级样式的子组件，然后处理渲染函数，这似乎很疯狂
我是不是错过了什么？是否全世界都接受了样式化的，而样式化的组件模式正是处理这些东西的方式？请让我知道你是如何解决这个问题的，或者给我指一下我看过的文档。非常感谢
 如果以后有人找到这篇文章，我会运行自己的测试，在创建1000p标记并根据索引为它们着色时，比较每种方法的性能
styled
的性能最高，ClassNames
的性能次之（其最佳性能通常与styled
的性能较低的部分相匹配）。直接传递css
标记的模板文本要比其他两种文本差得多，性能比styled
的最差性能差1.5到2倍
通过传递道具来有条件地设置样式绝对比静态样式慢，使用forstyled
只会在不过滤的情况下降低少量性能（如果这是一个潜在问题，可能是一个很好的折衷方案，以防止不必要的重新渲染）.
我可能错了，这可能值得测试，但我认为直接将对象传递给css道具可能更有效，因为您不需要css``函数。例如，只需将{color:'black'}传递给css道具即可。此外，如果您在组件之外定义css，则可以将速度提高到。比如constmystyle=csscolor:black，然后传递它。当你直接用css``传递一个带标签的模板时，你实际上是在调用一个函数，该函数为情感生成一个对象，以便在渲染过程中理解。在你的示例中，我会使用css={[bodyStyles，customStyles]}，这样可以避免调用css``和使用字符串插值。这里引用了情感网站的一段话来说明css功能的工作原理。“来自@emotion/react的css不返回计算类名字符串。该函数返回一个包含计算名称和展开样式的对象。”（向下滚动到字符串样式）。styled很可能更具性能，因为您在组件本身之外声明了它。
// 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>
  )
}