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

Question

使用带有 styled-jsx 的 Nextjs 我已经编写了下面的组件。

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

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

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

Answer 2

这里是 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>
  )
}

如果您不在样式中使用道具，我建议您将它们移到组件之外，因为这样效果会更好。

希望对您有所帮助。

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

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

Nextjs - how to apply styled-jsx to jsx returned from method

javascript

reactjs

next.js