如何在Angular中为单个组件单独设置背景颜色

以下方案都只需要修改全局CSS即可实现，无需调整单个组件的样式配置：

• 场景1：相邻组件交替显示黑白背景
  如果需要实现页面内上下排列的相邻组件背景色一黑一白交替，使用CSS结构伪类匹配对应元素即可：
  1. 若所有目标组件都是页面根节点（<body>）的直接子元素，全局CSS写入：

  body > *:nth-child(odd) {
    background-color: #ffffff;
  }
  body > *:nth-child(even) {
    background-color: #000000;
    color: #ffffff; /* 同步修改文字色避免黑背景下文字不可见 */
  }
  

  2. 若目标组件有统一的公共类名，直接匹配类名即可，不需要固定层级：

  .common-component-class:nth-child(odd) {
    background-color: #ffffff;
  }
  .common-component-class:nth-child(even) {
    background-color: #000000;
    color: #ffffff;
  }
  

如果组件之间穿插了其他隐藏元素、空标签导致计数不准，可以把nth-child替换为nth-of-type，只会统计同标签类型的元素，过滤无关标签干扰。如果原有组件自带背景样式优先级更高，可以在规则末尾加!important提升全局规则的优先级。

• 场景2：全局一键切换全站黑白背景
  如果需要实现点击切换按钮后全站整体从白背景切到黑背景（或反向），使用CSS变量加全局类控制即可：
  1. 全局CSS定义变量和切换规则：

  :root {
    --site-bg: #ffffff;
    --site-text: #000000;
  }
  /* 根节点加dark类时切换为黑背景 */
  :root.dark {
    --site-bg: #000000;
    --site-text: #ffffff;
  }
  /* 全局应用变量 */
  * {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
  }
  

  2. 只需要在切换逻辑里给<html>标签动态添加/移除dark类即可完成全局切换，不需要修改任何组件的样式。

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