关闭Nextjs JSX中的样式元素的正确方式?

tkclm6bt  于 2022-10-15  发布在  React
关注(0)|答案(1)|浏览(112)

我正在尝试在JSX组件中添加样式。
编译器给出了以下代码的错误消息。

import Card from "./card";

export default function CardRow(){
  return(
    <>
      <div>
        <Card></Card>
        <Card></Card>
        <Card></Card>
      </div>

      <style jsx>`
        div {
          display: flex
        }
      `
      </style>
    </>
  );
}

以下是错误:

Error: 
  x Expected '}', got ':'
    ,----
 14 | display: flex
    :        ^
    `----
zynd9foi

zynd9foi1#

在组件中添加样式时,必须以以下内容开头和结尾:
开始:

<style jsx>{`

结束:

`}</style>

您需要用{``}个花括号将整个样式括起来。

相关问题