ionic4开发——更改样式

题外话

• 现在是2018-11-02 更新cli后为4.3.0，可以看见tabs变了，应该是解决了以前tabs和返回的bug问题。
• vs可以安装ionic4插件，方便创建标签了。

开始主题

1. 打开官网的组件，都会看见有个CSS Custom Properties（如[badge]https://beta.ionicframework.com/docs/api/badge#css-custom-properties），经过一早上的研究我终于知道这个东西怎么使用了（也可能不是最正确的姿势，知道的大神请留言告诉我）。

<ion-badge>99</ion-badge>
<ion-badge style="--background:#abc; --color: #f60;">99</ion-badge>

2. 那怎么修改color="primary"这种呢？也有方法

<ion-button color="primary">使用自带颜色</ion-button>
<ion-button color="mycolor">使用我的颜色</ion-button>
// 对应scss添加
.ion-color-mycolor {
    --ion-color-base: #ff600d;
    --ion-color-base-rgb: 255,96,13;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255,255,255;
    --ion-color-shade: #e0540b;
    --ion-color-tint: #ff7025;
}

修改样式.jpg

效果图我就放一张上了，有兴趣的可以加ionic4开发群：670727319等你一起学习。