如何修改Ionic聊天应用中ion-list的背景颜色？

你的判断没错，Ionic的ion-list和ion-item都是基于Web Component实现的，内部包含Shadow DOM结构，普通CSS选择器无法直接穿透修改内部元素样式，这就是你之前的CSS代码无效的原因。下面是针对性的解决方案：

方案1：使用Ionic内置CSS变量（推荐） #

Ionic为所有组件提供了预定义的CSS变量，直接修改这些变量就能轻松覆盖默认样式，无需!important：

/* 按需修改ion-content的背景色 */
ion-content {
  --background: #f5f5f5;
}

/* 修改ion-list的背景色 */
ion-list {
  --background: transparent;
}

/* 将ion-item背景设为透明，让list的背景透出 */
ion-item {
  --background: transparent;
}

方案2：使用::part伪类穿透Shadow DOM #

如果需要更精细控制Shadow DOM内部元素，可以使用::part伪类，Ionic组件暴露了可访问的part名称（比如ion-item内部容器的part名为item）：

ion-item::part(item) {
  background-color: transparent !important;
}

方案3：深度选择器（仅兼容旧版Ionic） #

若你使用的是Ionic 4及更早版本，可使用已弃用的::ng-deep深度选择器（不推荐新版使用）：

::ng-deep ion-item .item-content {
  background-color: transparent !important;
}

代码调整建议 #

把你原有CSS中的ion-item { background-color: white; }替换成上述CSS变量或::part写法，同时根据需求调整ion-content和ion-list的背景色，即可实现预期的聊天界面背景效果。

内容的提问来源于stack exchange，提问作者D.Hodges