单击按钮时如何删除原色

正如您在 Overriding Ionic Sass variables 例如,当您将按钮声明为某种颜色时, primary 幕后爱奥尼亚将为android按钮应用以下样式:

$button-md-background-color:           color($colors-md, primary)   
$button-md-background-color-activated: color-shade($button-md-background-color)
$button-md-background-color-hover:     $button-md-background-color  

ios按钮也会出现类似的情况。这就是为什么在更改 background-color 使用css样式规则。这个 activated 和 hover 按钮的状态仍然使用从 主要的,重要的 由爱奥尼亚定义的颜色。

这个 离子方式 更改按钮背景颜色的方法是在 variables.scss 文件:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222222,
  newcolor:   #F74422 // <--- Here!
);

然后在按钮中使用该颜色,使用 color 属性:

<button ion-button color="newcolor">Secondary</button>

这样,爱奥尼亚将创建所有样式规则,使按钮在每个 状态 。

在ionic 4中尝试以下操作:

<ion-button class="my-button" expand="block" shape="round">TEXT</ion-button>

.my-button {
  --background: #4daf7c;
  --background-activated: #4daf7c;
}

它的发生是由于关注和访问 您需要覆盖

.click-button:focus

和

.click-button:visited 

也