如何定制特定离子组件

Question

我是离子的新手 我

 have this lines of code : 

  <ion-buttons slot="start">
          <ion-back-button :default-href="pageDefaultBackLink"></ion-back-button>
          <ion-button router-link="/memories/add" color="light">---1---</ion-button>
          <ion-button router-link="/memories/add" color="light">---2---</ion-button>
          <ion-button router-link="/memories/add" color="light">---3---</ion-button>
          <ion-button router-link="/memories/add" color="light">---4---</ion-button>
   </ion-buttons>

正在尝试做的是在最后一个Ion-button组件中添加一些自定义样式，但我不知道该怎么做， NB：我正在将VUE 3与离子6一起使用

Answer 1

您需要在全球或相应的SASS文件（.scss）上使用CSS，然后将其添加到CSS文件中的类或ID中。

您可以使用RAW CSS直接更改某些样式，有些则必须访问Shadow dom。

例如，您的ion-button和CSS可能看起来像：

<ion-button class="myButton">Hello World, Take Me Somewhere</ion-button>

CSS：

.myButton {
    font-size: 30px
}

将为使用mybutton类的任何地方分配30px的字体大小。

看看 ion-button css自定义属性正确的方向。

您还将从CSS上阅读和 w3schools 是一个很好的起点。