Next.js JSX中style元素正确关闭方式？样式编译报错求助

错误根源 #

编译报错的直接原因是CSS语法不规范：display: flex末尾缺少分号，导致编译器无法正确解析CSS规则。你的style标签闭合方式本身没有语法错误，但可以更规范。

修复步骤 #

1. 补全CSS属性分号 #

标准CSS要求所有属性声明末尾必须添加分号，修正后的style代码：

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

2. 规范style标签闭合 #

Next.js的styled-jsx要求包裹CSS的模板字符串直接衔接</style>标签（合理的换行格式化代码不影响，但避免不必要的空白）。完整修复后的组件代码：

import Card from "./card";

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

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

核心注意点 #

• styled-jsx对CSS语法要求严格，必须遵循标准CSS规则，遗漏分号是常见触发编译错误的原因。
• <style jsx>的正确写法是：用反引号`包裹CSS内容后直接闭合</style>，无需额外的换行或空白分隔模板字符串与闭合标签。

内容的提问来源于stack exchange，提问作者ric.row