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

Question

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

这是我的 Container 组件的示例：

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

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

export default Container;

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

现在，我计划在我的网站页眉中使用这个组件。但在标题的情况下，我希望 Container 组件是一个 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 组件指定的 flexbox 样式不存在。

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

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

我该怎么做？

感谢您的帮助！

Answer 1

这是样式化组件的工作：

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'};
  }
`;

在上面，我创建了一个自定义样式的组件，它接收custom 属性，然后有条件地更改您要调整的值。为了使更改更直观，我还设置了字体样式，以便您可以看到两个 <Container> 元素之间的直接区别。

---

对于更具可扩展性的解决方案（例如，针对不同主题），请使用ThemeProvider：

import React from "react";
import styled, { ThemeProvider } from "styled-components";

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

const Container = styled.div`
  display: ${(props) => props.theme.display};
  & h1 {
    font-family: ${(props) => props.theme.h1Font};
  }
`;

Container.defaultProps = {
  theme: {
    display: "block",
    h1Font: '"Arial Black", Gadget, sans-serif'
  }
};

const ContainerHeader = {
  display: "flex",
  h1Font: '"Courier New", Courier, monospace'
};

代码沙盒：https://codesandbox.io/s/stack-conditional-styled-components-vmnpn?file=/src/App.js:0-773

Answer 2

我相信我已经找到了我自己问题的答案（我仍会将这个问题留待几天，以防它可以改进）。

为了传递样式，您可以在样式化的 JSX 中添加“global”标志，并使用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;

然后，当您想使用该组件时，可以在<style jsx> 中使用global 标志添加其他样式：

在标题中使用和样式更多的容器：

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;

虽然这不是 100% 完美（但在我看来它仍然相当不错）：

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