javascript - Nextjs - 如何将 styled-jsx 应用于从方法返回的 jsx

Question

使用 Nextjs 和 styled-jsx 我编写了下面的组件。

现在我想知道如何将 styled-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>
    );
  }
}

我知道我可以像在下面的代码中所做的那样，但我宁愿让我的渲染方法更干净一点。

lass MainHeader extends Component {
  render() {
    return (
      <div className="mainContainer">
        {linkData.map(link => (
          <Link key={link.path} href={link.path}>
            <a className="link">{link.title}</a>
          </Link>
        ))}
        <style jsx>
          {`
            .mainContainer {
              align-items: center;
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }

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

Answer 1

这里是 styled-jsx 的作者:)

你有两个选择。第一个是将 .link 样式移动到它们所属的位置(getLinks 方法):

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

不用担心循环，styled-jsx 会删除它们的重复数据并仅渲染样式一次。

第二个选项是使用新功能，即 css.resolve:

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>
  )
}

如果您不在样式中使用 Prop ，我建议您将它们移到组件之外，因为它会表现得更好。

希望这有帮助。

FWIW，我们在 Spectrum 上有一个 styled-jsx 社区 https://spectrum.chat/styled-jsx