样式化组件，两层 className - 如何在组件声明中应用样式? [英] Styled components, two layers of className - How would I apply style in component declaration?

问题描述

我在 next.js 中创建了一个具有组件样式的 Container 组件.当我声明在整个站点中使用此容器组件时，我想为其添加一个 className 并根据其使用上下文对其进行主观设置.

这是我的容器组件的示例:

 const Container = (props) =>(<><div className="容器">{props.children}

<样式jsx>{`.容器{宽度:100%；最大宽度:1200px；边距:0 自动；}`}</style></>)导出默认容器；

所以，我想给它最大宽度为 1200 像素，并用自动边距居中.没问题，我已经这样做了.

现在，我打算在我网站的标题中使用这个组件.但是在标题的情况下，我希望 Container 组件是一个 flexbox:

从'./Container'导入容器const Header = (props) =>(<><标题><Container className="header-col"><div><h1>{props.title}</h1>

<导航><ul>{/* 导航项 */}</nav></容器></标题><样式jsx>{`.header-col{显示:弹性；对齐内容:间隔；}`}</style></>)导出默认标题；

当我查看该站点时，我注意到我在标题中为 Container 组件指定的 flexbox 样式不存在.

我期待 className 生效，并允许我添加其他样式.

我相信这与它认为 className 不是类名，而是道具有关.但是，我想通过在组件上创建样式继承来保持代码干燥.

我怎么能这样做?

感谢您的帮助！

解决方案

我相信我已经找到了我自己问题的答案(我仍然会将这个问题再开放几天如果可以改进).

为了传递样式，您可以添加global"；标记到样式化的 JSX 并使用 props.className 在组件中附加其他类名.

使用props.className的父容器组件:

const Container = (props) =>(<><div className={`容器 ${props.className}`}>{props.children}

<样式jsx>{`.容器{宽度:100%；最大宽度:1200px；边距:0 自动；}`}</style></>)导出默认容器；

然后，当您想使用该组件时，您可以在