Css 如何更改操作表中自定义图标的颜色？

我想更改嵌入以下操作表中的IcoMoon生成的自定义图标的颜色。我正在使用离子框架版本：3.1.1

以下是与视图相关的三个文件的外观：

groups.html

groups.css

---

提前谢谢！！我试图按照文档进行操作，但我不知道如何操作。

尝试在ionic.css中更新此类

.action-sheet-has-icons .icon {
color:/*whatever you want*/
}

---

尝试在app.scss中添加样式：

app.scss：

.ion-logo-whatsapp:before {
   color: green;
} 

---

在scss文件中，必须将.action sheets groups page类移出页面组{}，因为您的操作表不在页面中 你应该这样做

组.scss

离子4溶液操作表按钮文本颜色变化 您必须向按钮添加CSS类，如下面示例中的example.page.ts所示

buttons: [{ text: "Price : High to Low", icon: "arrow-round-up", cssClass: "dark", // css name can be anything handler: () => { this.getSortProducts("High to Low"); } }] 将CSS放入global.scss

.dark { color: black !important; } 它仅在from global.scss上工作，因为此操作表是从页面外加载的

// in component ts      
  async presentActionSheet(body) {
            const actionSheet = await this.actionSheetController.create({
              header: "Options",
              buttons: [
                {
                  text: "Add More Item",
                  icon: "add",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.OpenTopupModal(body);
                  },
                },
                {
                  text: "Update Use Item",
                  icon: "pencil",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.openUsedItemModal(body);
                  },
                },
        ...
    
    
    in global.scss
    
    .example .action-sheet-icon {
      color: #1e3d6e !important;
    }

---

谢谢

关键是在global.scss中设置样式，因为此操作表是从页面外加载的。

用其他颜色替换灰色？我尝试了variables.scss文件中定义的所有颜色，但不起作用谢谢，但不起作用。我把.action sheet放在了图标上。图标{color:rgba29,29,29,0.47；}因为它不存在于ionic.css中，但是没有效果。哦，很抱歉。试试看这篇文章，它肯定会对你有所帮助。只需将cssClass与每个button@Giannkas如果没有任何效果，请尝试添加此class.action sheet按钮.action sheet图标{color:rgba29,29,29,0.47！important；}我按照文章中指定的说明进行操作，但不起作用，其他选项，我应该在哪个文件中添加这些类？在ionic.css中？或者在groups.css中？尝试在这两种情况下更新。或者在自定义样式表或sass文件中，请注意步骤2。它不在组件样式中，而是在global.scss中。如果我读完了，我会节省20分钟。

// in component ts      
  async presentActionSheet(body) {
            const actionSheet = await this.actionSheetController.create({
              header: "Options",
              buttons: [
                {
                  text: "Add More Item",
                  icon: "add",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.OpenTopupModal(body);
                  },
                },
                {
                  text: "Update Use Item",
                  icon: "pencil",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.openUsedItemModal(body);
                  },
                },
        ...
    
    
    in global.scss
    
    .example .action-sheet-icon {
      color: #1e3d6e !important;
    }

page-groups {
    ion-content{
        .settitle{
            font-size: 70%;
            color: grey;
        }
        button.iconmore{
            font-size: 80%;
            color: grey;
        }
        ion-col.rightcol{
            direction: rtl;
        }
        p.content{
            font-size: 90%;
            color: grey;
        }
    }

}

.action-sheets-groups-page {
    .icon-edition {
        color: grey;
    }
    .icon-erase {
        color: grey;
    }
    .action-sheet-cancel ion-icon,
    .action-sheet-destructive {
        color: grey;
    }
}

buttons: [{ text: "Price : High to Low", icon: "arrow-round-up", cssClass: "dark", // css name can be anything handler: () => { this.getSortProducts("High to Low"); } }] .dark { color: black !important; }

// in component ts      
  async presentActionSheet(body) {
            const actionSheet = await this.actionSheetController.create({
              header: "Options",
              buttons: [
                {
                  text: "Add More Item",
                  icon: "add",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.OpenTopupModal(body);
                  },
                },
                {
                  text: "Update Use Item",
                  icon: "pencil",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.openUsedItemModal(body);
                  },
                },
        ...
    
    
    in global.scss
    
    .example .action-sheet-icon {
      color: #1e3d6e !important;
    }