如何自定义特定离子组件的样式

Question

i new to ionic，我

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>

我想做的是添加一些自定义样式到最后一个离子按钮组件，但我不知道我怎么能做到这一点，注:我用的是离子6

Answer 1

您需要使用CSS，无论是全局还是相应的Sass文件(.scss)，并将其添加到CSS文件中的类或ID中，然后将其作为目标。

有些样式可以直接使用原始CSS来更改，有些则必须访问Shadow DOM。

例如，你的ion-button和CSS看起来像这样:

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

CSS:

.myButton {
font-size: 30px
}

这将分配一个字体大小为30px的地方，你使用myButton类

看一下离子按钮的CSS自定义属性在正确的方向上的推动。

你也会受益于阅读CSS和w3schools是一个很好的起点。