无需引入CSS Modules时React中<li css={css`...`}>样式不生效如何解决

你用到的css属性+css标签模板的写法是Emotion、styled-components等CSS-in-JS库的专属扩展语法，React本身原生不识别该属性，未完成对应依赖安装、配置的情况下，这个css属性会被React当做无效自定义属性直接忽略，自然不会生效。
常见的未生效具体场景包括：

• 没有安装对应的CSS-in-JS依赖包
• 没有配置对应Babel/SWC插件来处理css属性
• 使用css函数前没有从对应的库中导入该函数
• 未在文件顶部添加jsxImportSource的注释声明（针对Emotion库）

以下方案都不需要引入CSS Modules，可按需选择：

方案1：使用React原生支持的style属性（无额外依赖，最简便） #

直接将样式写为驼峰命名的JS对象，传入style属性即可，无需任何额外配置：

<li 
  key={`${comentario.usuarioId}-${i}`} 
  style={{
    border: '1px solid #e1e1e1',
    padding: '2rem'
  }}
>

方案2：使用全局类名匹配样式 #

提前在全局CSS文件中定义对应样式类：

.comment-item {
  border: 1px solid #e1e1e1;
  padding: 2rem;
}

给li元素添加对应className即可：

<li 
  key={`${comentario.usuarioId}-${i}`}
  className="comment-item"
>

方案3：完整配置CSS-in-JS库支持css属性 #

如果你想保留现有的css属性写法，需要完成Emotion的全量配置：

1. 安装依赖：npm install @emotion/react @emotion/babel-plugin
2. 在每个用到css属性的JSX文件顶部添加编译声明：

   /** @jsxImportSource @emotion/react */
   import { css } from '@emotion/react'
   

3. 也可以在项目的Babel/SWC配置中添加对应插件，避免每个文件都加注释声明，配置完成后原有css属性写法即可正常生效。

内容的提问来源于stack exchange，提问作者Daniel Augusta