ionic 修改组件默认样式_Ionic4自定义组件颜色以及扩展默认颜色

要修改Ionic组件的默认样式，你可以使用Ionic的全局CSS变量来覆盖默认样式。这些变量可以在全局样式表中定义，并在应用程序中使用。以下是一些修改Ionic组件默认样式的方法：

1. 在全局样式表中定义CSS变量，并在应用程序中使用它们。

例如，要修改Ionic的默认主题颜色，可以定义以下CSS变量：

:root {
  --ion-color-primary: #007aff;
  --ion-color-primary-rgb: 0, 122, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #0062cc;
  --ion-color-primary-tint: #1c8adb;
}

然后，在你的组件中使用这些变量：

<ion-button color="primary">Primary Button</ion-button>

2. 使用Ionic提供的Sass变量来覆盖默认样式。

例如，要修改Ionic的默认主题颜色，可以在全局样式表中添加以下代码：

$colors: (
  primary: #007aff
);

@import "~@ionic/angular/css/ionic";

这将覆盖默认主题颜色，并将应用程序中的所有Ionic组件的主题颜色更改为#007aff。

希望这些方法能够帮助你修改Ionic组件的默认样式。