React Admin 4.12.1升级依赖后SingleFieldList覆盖ChipField文本样式问题

问题背景 #

基于React Admin 4.12.1开发的项目，执行yarn upgrade升级依赖包前运行正常，升级后无法看到ChipField组件内的文本。使用的代码如下：

<SingleFieldList link={false}>
    <ChipField source="name" />
</SingleFieldList>

经排查，是Mui包（从5.11.16升至5.14.16）升级后，SingleFieldList的color样式覆盖了ChipField的文本颜色，导致文本不可见。尝试覆盖React Admin主题未成功，因大量代码使用该组件组合，需简洁解决方法。

本次升级的依赖包变更如下：

"@babel/preset-react": 7.18.6 -> 7.22.15,
"@date-io/moment": 2.16.1 -> 2.17.0,
"@emotion/react": 11.11.0 -> 11.11.0,
"@emotion/styled": 11.10.6 -> 11.11.0,
"@mui/icons-material": 5.11.16 -> 5.14.16,
"@mui/material": 5.11.16 -> 5.14.16,
"@mui/styles": 5.12.0 -> 5.14.16,
"@mui/x-date-pickers": 5.0.0-beta.0 -> 5.0.20,
"@react-pdf/renderer": 3.1.9 -> 3.1.14,
"jsona": 1.11.0 -> 1.12.1,
"ra-data-json-server": 4.8.4 -> 4.15.2,
"react-select": 5.7.3 -> 5.7.7,
"webpack-dev-server": 4.15.0 -> 4.15.1

"devDependencies": {
  "@testing-library/dom": 9.0.1 -> 9.3.3,
  "@testing-library/jest-dom": 5.16.5 -> 5.17.0,
  "@webpack-cli/serve": 2.0.4 -> 2.0.5
},

简洁解决方案 #

方案1：全局重置SingleFieldList样式 #

在项目全局样式文件或主题配置中添加以下CSS，让SingleFieldList继承子组件的颜色，避免覆盖ChipField的文本样式：

.ra-SingleFieldList {
  color: inherit;
}

该方案适合大量使用SingleFieldList + ChipField组合的场景，一次修改即可全局生效。

方案2：直接给ChipField指定文本颜色 #

通过ChipField的sx属性强制设置文本颜色，利用CSS优先级覆盖父组件样式：

<SingleFieldList link={false}>
    <ChipField source="name" sx={{ color: 'text.primary' }} />
</SingleFieldList>

其中text.primary是Mui主题默认的主文本颜色，也可替换为具体颜色值（如#000）。

方案3：降级Mui包版本 #

若暂时不想调整代码，可将Mui相关包降级回原版本，在package.json中锁定版本后执行yarn install：

"@mui/icons-material": "5.11.16",
"@mui/material": "5.11.16",
"@mui/styles": "5.12.0"

此为临时应急方案，可快速恢复项目运行。

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