Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 样式化组件,两层类名-如何在组件声明中应用样式?_Css_Reactjs_Styles_Next - Fatal编程技术网

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

Css 样式化组件,两层类名-如何在组件声明中应用样式?,css,reactjs,styles,next,Css,Reactjs,Styles,Next,我在next.js中创建了一个具有组件样式的容器组件。 当我在整个站点中声明使用此容器组件时,我希望向其添加一个类名,并根据其使用的上下文主观地对其进行样式设置 以下是我的容器组件的一个示例: const Container = (props) => ( <> <div className="container"> {props.children} </div>

我在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;