如何修改ICDS导入按钮颜色？默认样式覆盖自定义CSS问题

1. 先修正CSS语法错误 #

你当前CSS里的颜色值带了双引号，这是无效的写法，先去掉引号：

.button-with-margin {
  margin: 10px 0px 0px 5px;
  float: right;
  color: #5a3eab; /* 去掉双引号，CSS属性值不需要引号 */
}

2. 提升选择器优先级覆盖默认样式 #

ICDS组件的内置样式选择器优先级更高，你需要用更具体的选择器命中按钮：

/* 针对你使用的tertiary变体按钮 */
.ic-button--tertiary.button-with-margin {
  color: #5a3eab;
}
/* 如果需要覆盖hover状态的样式 */
.ic-button--tertiary.button-with-margin:hover {
  color: #4a2f9b;
}

3. 用组件内置CSS变量改色（推荐） #

ICDS的React组件支持通过CSS自定义属性直接修改主题色，无需深入DOM结构：

.button-with-margin {
  margin: 10px 0 0 5px;
  float: right;
  /* 针对tertiary按钮的文字颜色 */
  --ic-color-tertiary: #5a3eab;
  /* 可选：设置hover状态的颜色 */
  --ic-color-tertiary-hover: #4a2f9b;
}

如果是primary类型按钮，替换成--ic-color-primary和--ic-color-primary-hover即可。

4. 全局统一改色（可选） #

如果希望项目中所有ICDS按钮都使用这个紫色，在全局CSS文件中设置根变量：

:root {
  --ic-color-primary: #5a3eab;
  --ic-color-tertiary: #5a3eab;
  /* 按需添加其他需要覆盖的颜色变量，比如secondary、destructive等 */
}

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