Next.js 如何引用作为功能组件的样式化组件？

这是我能想到的最基本的例子：

从“React”导入React；
进口{
css，
}来自“样式化组件”；
const Foo=（道具）=>{
控制台日志（道具）；
常数{
儿童
}=道具；
返回{children}；
};
导出默认值（）=>{
返回
福
;
};

在本例中，我想设置

Foo

组件的样式，该组件是

div

的后代

我希望生成的标记类似于：

FOO

然而，它只是：

FOO

似乎任何地方都没有应用任何样式

此外，组件

Foo

仅呈现一次，但会使用不同的参数调用两次：

{children: {…}, theme: {…}}
  children: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
  theme: {}

{children: "FOO"}

我应该提到，我试过：

/@flow
从“React”导入React；
导入样式{
css，
}来自“样式化组件”；
const Foo=样式化（（道具）=>{
常数{
类名，
儿童
}=道具；
返回{children}；
});
导出默认值（）=>{
返回
福
;
};

但是，在中执行此代码时，我得到以下错误：

已动态创建id为“sc dlnjPT”的组件样式（组件）

您可能会看到此警告，因为您在另一个组件中调用了styled

要解决此问题，请仅在任何渲染方法和函数组件之外创建新的StyledComponents

已动态创建id为“sc hKFyIo”的组件样式（组件）

您可能会看到此警告，因为您在另一个组件中调用了styled

要解决此问题，请仅在任何渲染方法和函数组件之外创建新的StyledComponents

错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本

---

考虑到主题代码片段，这没有多大意义。

主要问题是

不是样式化组件，而是功能组件

我想你需要这样做

const Foo = styled.div`
    background: #f00;
`

然后，您可以使用

css

和

$

引用更改

Foo

的样式

代码不工作的原因如下

此行为仅在样式化组件的上下文中受支持：尝试在以下示例中装载B将失败，因为组件Foo是React.component的实例，而不是样式化组件

const Foo = () => <div> </div>

const B = styled.div`
  ${Foo} {
  }
`

constfoo=（）=>
const B=styled.div`
${Foo}{
}
`

但是，在styled（）工厂中包装Foo使其符合插值条件——只需确保包装的组件传递类名即可

const Foo = (props) => {
  console.log(props);

  const {
    children,
  } = props;

  return <div className="Test-Class" {...props}>{children}</div>;
};

const StyledFoo = styled(Foo)``

const Main = styled.div`
  ${StyledFoo} {
    background: #f00;
  }
`

constfoo=（道具）=>{
控制台日志（道具）；
常数{
儿童
}=道具；
返回{children}；
};
const StyledFoo=已设置样式（Foo）``
const Main=styled.div`
${StyledFoo}{
背景：#f00；
}
`

代码沙箱

import { render } from "react-dom";
import React from "react";
import styled from "styled-components";

const Foo = (props) => {
  const { className, children } = props;

  return <div className={className}>{children}</div>;
};

const Bar = styled(Foo)``;

const Main = styled.div`
  ${Bar} {
    background-color: #000;
    color: #fff;
  }
`;
const App = () => {
  return (
    <Main>
      {" "}
      <Bar>Hello </Bar>{" "}
    </Main>
  );
};

render(<App />, document.getElementById("root"));

从“react dom”导入{render}；
从“React”导入React；
从“样式化组件”导入样式化；
const Foo=（道具）=>{
const{className，children}=props；
返回{children}；
};
常量条=样式化（Foo）`；
const Main=styled.div`
${Bar}{
背景色：#000；
颜色：#fff；
}
`;
常量应用=（）=>{
返回(
{" "}
你好{“}
);
};
渲染（
主要问题是
不是一个样式化组件，而是一个功能组件

我想你需要这样做

const Foo = styled.div`
    background: #f00;
`

然后，您可以使用
css
和
$
引用更改
Foo
的样式

代码不工作的原因如下

此行为仅在样式化组件的上下文中受支持：尝试在以下示例中装载B将失败，因为组件Foo是React.component的实例，而不是样式化组件

const Foo = () => <div> </div>

const B = styled.div`
  ${Foo} {
  }
`

constfoo=（）=>
const B=styled.div`
${Foo}{
}
`

但是，在styled（）工厂中包装Foo使其符合插值条件——只需确保包装的组件传递类名即可

const Foo = (props) => {
  console.log(props);

  const {
    children,
  } = props;

  return <div className="Test-Class" {...props}>{children}</div>;
};

const StyledFoo = styled(Foo)``

const Main = styled.div`
  ${StyledFoo} {
    background: #f00;
  }
`

constfoo=（道具）=>{
控制台日志（道具）；
常数{
儿童
}=道具；
返回{children}；
};
const StyledFoo=已设置样式（Foo）``
const Main=styled.div`
${StyledFoo}{
背景：#f00；
}
`

代码沙箱

import { render } from "react-dom";
import React from "react";
import styled from "styled-components";

const Foo = (props) => {
  const { className, children } = props;

  return <div className={className}>{children}</div>;
};

const Bar = styled(Foo)``;

const Main = styled.div`
  ${Bar} {
    background-color: #000;
    color: #fff;
  }
`;
const App = () => {
  return (
    <Main>
      {" "}
      <Bar>Hello </Bar>{" "}
    </Main>
  );
};

render(<App />, document.getElementById("root"));

从“react dom”导入{render}；
从“React”导入React；
从“样式化组件”导入样式化；
const Foo=（道具）=>{
const{className，children}=props；
返回{children}；
};
常量条=样式化（Foo）`；
const Main=styled.div`
${Bar}{
背景色：#000；
颜色：#fff；
}
`;
常量应用=（）=>{
返回(
{" "}
你好{“}
);
};
提供（
你试过使用
样式化的组件吗？
？刚刚添加了一条关于使用
样式化的评论。你能把它作为一个代码沙盒发布吗。当然，只是提醒一下，
样式化的组件
似乎大部分已经过时了。在v5之前，我已经使用了很多年，直到v5，在那里一切都没有修复的情况下开始崩溃。因此，我跳到了e> @emotion/styled
。它与样式化组件非常相似，但它…非常有效。而且，它也有效！你试过使用
样式化组件吗？刚刚添加了一条关于使用
样式化组件的评论。你能将其作为代码沙盒发布吗。当然，值得一提的是，
样式化组件
似乎基本上已经过时了。我已经使用了很多年了直到v5，一切都开始中断，没有修复。因此，我跳到了
@emotion/styled
。它非常类似于样式化组件，但它…只是工作。而且，它工作！问题是关于使用功能组件，而不是样式化组件。根据文档，上面