Css 样式化组件，两层类名-如何在组件声明中应用样式？

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

以下是我的容器组件的一个示例：

    const Container = (props) => (
    <>
        <div className="container">
            {props.children}
        </div>

        <style jsx>{`
            .container{
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
        `}</style>
    </>
)

export default Container;

const容器=（道具）=>(
{props.children}
{`
.集装箱{
宽度：100%；
最大宽度：1200px；
保证金：0自动；
}
`}
)
导出默认容器；

所以，我想给它一个1200px的最大宽度，并用自动边距将其居中。没问题，我已经做到了

现在，我计划在我的站点标题中使用这个组件。但在标题的情况下，我希望容器组件是flexbox：

import Container from './Container'

const Header = (props) => (
    <>
        <header>
            <Container className="header-col">
                <div>
                    <h1>{props.title}</h1>
                </div>
                <nav>
                    <ul>
                        {/* Navigation items */}
                    </ul>
                </nav>
            </Container>
        </header>

        <style jsx>{`
            .header-col{
                display: flex;
                justify-content: space-between;
            }
        `}</style>
    </>
)

export default Header;

从“./Container”导入容器
常数头=（道具）=>(
{props.title}

{/*导航项目*/}

{`
.标题栏{
显示器：flex；
证明内容：之间的空间；
}
`}
)
导出默认标题；

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

我希望类名生效，并允许我添加其他样式

我认为这与认为类名不是类名，而是道具有关。但是，我希望通过在组件上创建样式继承来保持代码的干燥

我怎么能这样做

---

谢谢你的帮助

这是样式化组件的作业：

import React from "react";
import styled from "styled-components";

export default function App() {
  return (
    <>
      <Container custom={"header"}>
        <h1>Very fancy h1 with flex display</h1>
      </Container>
      <Container custom={"regular"}>
        <h1>Non-fancy h1 with no flex display</h1>
      </Container>
    </>
  );
}

const Container = styled.div`
  display: ${(props) => (props.custom === "header" ? "flex" : "block")};
  /* you can call your prop ^^^^^^ whatever you want, 
  just change it on the container element too*/

  & h1 {
    /* you can apply css to children like so */

    font-family: ${(props) =>
      props.custom === "header"
        ? '"Courier New", Courier, monospace'
        : '"Arial Black", Gadget, sans-serif'};
  }
`;

CodeSandbox:

我相信我已经找到了我自己问题的答案（我仍然会把这个问题保留几天，以防万一可以改进）

为了传递样式，您可以将“

global

”标志添加到样式化的JSX中，并使用

props.className

在组件中附加其他类名

使用

props.className

的父容器组件：

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

        <style jsx>{`
            .container{
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
        `}</style>
    </>
)

export default Container;

但这并不是100%完美（但在我看来还是相当不错）：

• “全局”标志使您的样式成为全局样式。所以其他组件可以使用 这些风格（我相信）
• 您需要确保您的组件采用props.className来为这个全局样式附加额外的类名

---

在我看来，这里有一个问题。这是非常声明性的，因为如果我现在选择包括第三个显示选项（如grid），我需要修改组件的逻辑。在这样的规模下，这并不是什么大问题，但我可以想象，在更大的项目中，这可能会使组件逻辑看起来很难看。@JackWright看到我更新的答案，并告诉我

ThemeProviders

是否符合您的用例。哦，我以前从未使用过主题提供程序。。。我试过了，但感觉不对。我现在混合了两种组件样式的方法，它开始看起来很混乱。在next.js中，我喜欢您如何添加本地标记来设置组件的样式。我只是希望我可以声明一个组件，并给它另一个类名，以便使用从组件声明继承的样式添加额外的样式层。对我来说，这意味着我可以指定默认样式，给组件一个类名，并扩展组件本身中已经声明的样式。这似乎是为我做这件事的最好的方式。显然，我可能需要重新考虑如何设计我的组件！真可惜。

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

        <style jsx>{`
            .container{
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
        `}</style>
    </>
)

export default Container;

import Container from './Container';

const Header = (props) => (
    <>
        <header>
            <Container className="header-col">

                <div>
                    <h1>{props.title}</h1>
                </div>


                <nav>
                    <ul>
                        <li>Hello</li>
                        <li>There</li>
                    </ul>
                </nav>
            </Container>
        </header>

        <style jsx global>{`
            .header-col{
                display: flex;
                justify-content: space-between;
            }
        `}</style>
    </>
)

export default Header;