如何通过CSS移除指定条件下sc-pc-action-button类的样式

针对你的场景（React组件硬编码了sc-pc-action-button类，无法通过JS移除），可以通过CSS选择器优先级覆盖或样式重置的方式，完全替换该类的样式，以下是具体方案：

方案一：优先级覆盖+逐项重置 #

给需要自定义样式的按钮传入额外的类（比如custom-btn），然后通过组合选择器（优先级高于单个类选择器）覆盖原类的样式：

步骤1：使用按钮时传入自定义类 #

<Button
  block={true}
  className={`sc-pc-action-button custom-btn`.trim()}
  disabled={disabled}
  onClick={onClick}
>
  Click me
</Button>

步骤2：编写CSS覆盖样式 #

/* 组合选择器优先级更高，直接覆盖sc-pc-action-button的样式 */
.custom-btn.sc-pc-action-button {
  /* 先重置原类的关键样式，根据实际情况调整 */
  background: unset;
  border: unset;
  padding: unset;
  margin: unset;
  font-size: unset;
  color: unset;
  /* 添加你的自定义样式 */
  background-color: #2563eb;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 处理禁用状态 */
.custom-btn.sc-pc-action-button:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

方案二：用all: unset快速重置所有样式 #

如果原类的样式太多，不想逐个重置，可以用all: unset一键清除所有继承和默认样式，再添加自定义样式：

.custom-btn.sc-pc-action-button {
  /* 清除所有现有样式 */
  all: unset;
  /* 自定义样式 */
  background-color: #2563eb;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  /* 手动补全按钮必要的默认行为样式 */
  outline: 2px solid transparent;
  outline-offset: 2px;
  display: inline-block;
}

.custom-btn.sc-pc-action-button:focus {
  outline-color: #3b82f6;
}

关键提示 #

• 确保自定义选择器的优先级不低于原sc-pc-action-button的选择器。如果原样式用了更复杂的选择器（比如.page-container .sc-pc-action-button），你的自定义选择器也要对应升级（比如.page-container .custom-btn.sc-pc-action-button）。
• all: unset会清除按钮的所有默认样式（包括浏览器自带的按钮外观），需要手动补全焦点、光标等必要交互样式。

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