在 Angular 2/Ionic 2 中移除自动注入的 CSS 样式答案

【问题标题】：Removing automaticly injected CSS styles in Angular 2/ Ionic 2在 Angular 2/Ionic 2 中移除自动注入的 CSS 样式
【发布时间】：2018-12-08 03:42:12
【问题描述】：

我遇到的问题是，当我在按钮上添加 ionic 2 gesture（按下）时，它会自动向该按钮添加内联样式。

有没有办法否决它添加的样式？

按钮

<button ion-button (press)="toggleFavourite(sound)" (click)="share(sound.file)"></button>

由于（按下）手势而添加的 CSS。

style="
touch-action: none; 
user-select: none; 
-webkit-user-drag: none; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"

【问题讨论】：

您可以通过在每个属性后添加 !important 来使用自己的 css 否决

标签： html css angular typescript ionic2

【解决方案1】：

您可以在page.scss 文件中按如下所示进行操作。

注意：不要使用!import hack。这是非常糟糕的。

page.scss

.ios,
.md,
.wp {
    page-my {
        .my-gesture {
           touch-action: none; 
           user-select: none; 
          -webkit-user-drag: none; 
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
}

page.html

 <button ion-button class="my-gesture" (press)="toggleFavourite(sound)" 
 (click)="share(sound.file)"></button>

【讨论】：