Javascript 如何将样式化的jsx应用于从方法返回的jsx

使用带有样式jsx的Nextjs，我编写了下面的组件

现在我想知道如何将样式化的jsx应用于从

getLinks

方法返回的jsx

在下面的示例中，来自

getLinks

方法的jsx没有被样式化

class MainHeader extends Component {
  getLinks = () => {
    const links = linkData.map(link => (
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
    ));
    return links;
  };

  render() {
    return (
      <div className="mainContainer">
        {this.getLinks()}
        <style jsx>
          {`
            .mainContainer {
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }

            .link {
              color: ${colors.tPri};
              font-size: 2rem;
              margin-left: 1.6rem;
            }
          `}
        </style>
      </div>
    );
  }
}

class MainHeader扩展组件{
getLinks=（）=>{
const links=linkData.map（link=>(
))}
{`
.主集装箱{
对齐项目：居中；
背景：${colors.pri}；
显示器：flex；
高度：60px；
}
.链接{
颜色：${colors.tPri}；
字号：2rem；
左边距：1.6雷姆；
文字装饰：无；
}
`}
);
}
}

也许像这样的东西对你来说足够干净了

class MainHeader extends Component {
  getLinks = () => {
    const links = linkData.map(link => (
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
    ));
    return <>
            {links}
              <style jsx>
          {`
            .link {
              color: ${colors.tPri};
              font-size: 2rem;
              margin-left: 1.6rem;
            }
          `}
        </style>
           </>;
  };

  render() {
    return (
      <div className="mainContainer">
        {this.getLinks()}
        <style jsx>
          {`
            .mainContainer {
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }
          `}
        </style>
      </div>
    );
  }
}

class MainHeader扩展组件{
getLinks=（）=>{
const links=linkData.map（link=>(
{link.title}
));
返回
{links}
{`
.链接{
颜色：${colors.tPri}；
字号：2rem；
左边距：1.6雷姆；
}
`}
;
};
render（）{
返回(
{this.getLinks（）}
{`
.主集装箱{
背景：${colors.pri}；
显示器：flex；
高度：60px；
}
`}
);
}
}

也许像这样的东西对你来说足够干净了

class MainHeader extends Component {
  getLinks = () => {
    const links = linkData.map(link => (
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
    ));
    return <>
            {links}
              <style jsx>
          {`
            .link {
              color: ${colors.tPri};
              font-size: 2rem;
              margin-left: 1.6rem;
            }
          `}
        </style>
           </>;
  };

  render() {
    return (
      <div className="mainContainer">
        {this.getLinks()}
        <style jsx>
          {`
            .mainContainer {
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }
          `}
        </style>
      </div>
    );
  }
}

class MainHeader扩展组件{
getLinks=（）=>{
const links=linkData.map（link=>(
{link.title}
));
返回
{links}
{`
.链接{
颜色：${colors.tPri}；
字号：2rem；
左边距：1.6雷姆；
}
`}
;
};
render（）{
返回(
{this.getLinks（）}
{`
.主集装箱{
背景：${colors.pri}；
显示器：flex；
高度：60px；
}
`}
);
}
}

这里是styled jsx的作者：）

你有两个选择。第一种方法是将

.link

样式移动到它们所属的位置（使用

getLinks

方法）：

如果您在样式中使用道具而不是，我建议您将道具移到组件之外，因为这样性能会更好

希望这有帮助

---

FWIW我们有一个关于styled jsx频谱的社区（这里是styled jsx的作者：）

你有两个选择。第一种方法是将

.link

样式移动到它们所属的位置（使用

getLinks

方法）：

如果您在样式中使用道具而不是，我建议您将道具移到组件之外，因为这样性能会更好

希望这有帮助

---

FWIW我们在Spectrum上有一个社区，用于样式化jsx

使用您的代码，我的链接不会收到任何样式。你确定这应该有效吗？我为你做了一个简单的测试，没有你应用程序中的所有数据。应该可以。谢谢您的尝试，但是由于某些原因，在使用您的代码时样式没有应用。我复制并粘贴了0 1 2 3 4，也看到了0 1 2 3 4的渲染，而不是我自己的链接数据，但它使用默认样式设置样式，而不是随附样式中指定的样式。我猜是吧；这是一个单独的问题，为什么我没有得到预期的输出。使用你的代码，我的链接没有收到任何样式。你确定这应该有效吗？我为你做了一个简单的测试，没有你应用程序中的所有数据。应该可以。谢谢您的尝试，但是由于某些原因，在使用您的代码时样式没有应用。我复制并粘贴了0 1 2 3 4，也看到了0 1 2 3 4的渲染，而不是我自己的链接数据，但它使用默认样式设置样式，而不是随附样式中指定的样式。我猜是吧；这是一个单独的问题，为什么我得不到预期的产出。谢谢，你的解决方案奏效了。虽然在某些情况下，它似乎会导致错误。聊天社区：啊，是的，我认为这是因为

Link

只接受一个孩子。更新了答案以避免混淆。谢谢，您的解决方案有效。虽然在某些情况下，它似乎会导致错误。聊天社区：啊，是的，我认为这是因为

Link

只接受一个孩子。更新了答案以避免混淆。

getLinks = () => {
  const links = linkData.map(link => (
    <>
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
      <style jsx>{`
        .link {
          color: ${colors.tPriD};
        }
      `}</style>
    </>
  ));
  return links;
}

getLinks = (scopedClass) => {
  const links = linkData.map(link => (
    <Link key={link.path} href={link.path}>
      <a className={`${scopedClass} link`}>{link.title}</a>
    </Link>
  ));
  return links;
}

render() {
  const { className, styles } = css.resolve`
    .link {
      color: ${colors.tPri};
      font-size: 2rem;
      margin-left: 1.6rem;
    }
  `

  return (
    <div className="mainContainer">
      {styles}
      {this.getLinks(className)}
    </div>
  )
}