React JSX中style标签写CSS报'}' expected错误原因咨询

你碰到的是JSX语法的解析规则问题，和CSS本身写法无关：

• JSX是JavaScript的语法扩展，不是原生HTML，<style>标签内的内容不会默认被当成纯文本解析
• JSX中{和}是插值语法的边界标记，只要出现未被包裹的大括号，解析器就会认为大括号内部是要执行的JavaScript表达式
• 你写的CSS代码Grid { display: flex }里的左大括号触发了解析器的插值逻辑，之后的display: flex不符合JS语法，碰到右大括号时就会抛出}' expected、Unexpected token的错误，提示里建议写{'}'}本质就是把右大括号转义为普通文本，避免被当成插值结束标记。

直接把整段CSS包裹在模板字符串里，通过插值传入即可，不需要逐个转义大括号：

const styleCheck = () => {
  return (
    <div>
      <style>
        {`
          Grid {
            display: flex;
          }
          /* 可以直接在这里写媒体查询做移动端适配，比如 */
          @media (max-width: 768px) {
            Grid {
              /* 移动端对应的布局样式 */
            }
          }
        `}
      </style>
    </div>
  )
}

你提到Grid是自定义组件，需要注意：自定义组件不会被渲染为真实DOM标签，直接用Grid作为CSS选择器是匹配不到最终渲染的页面元素的。建议给Grid组件传递className属性，用类选择器写样式，才能正常生效。

内容的提问来源于stack exchange，提问作者Saurav Chittal