如何在ionic4中设置特定于平台的css ( android和ios风格不同)

:root {
  --platform-specific-color: #000000; // 默认颜色
}

// Android平台样式
.platform-android {
  --platform-specific-color: #FF0000; // Android平台颜色
}

// iOS平台样式
.platform-ios {
  --platform-specific-color: #00FF00; // iOS平台颜色
}

.my-component {
  color: var(--platform-specific-color);
}

<ion-content [class.platform-android]="isAndroid" [class.platform-ios]="isIOS">
  <div class="my-component">特定平台的样式</div>
</ion-content>

import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-my-component',
  templateUrl: 'my-component.page.html',
  styleUrls: ['my-component.page.scss'],
})
export class MyComponentPage {
  isAndroid: boolean;
  isIOS: boolean;

  constructor(private platform: Platform) {
    this.isAndroid = this.platform.is('android');
    this.isIOS = this.platform.is('ios');
  }
}