1

i new to ionic , i

 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>

what i'm trying to do is add some custom style to the last ion-button component , but i have no idea how i can do that , Nb: i'm using vue 3 with ionic 6

2
  • Do you know css ? yes : just add a class or inline style. Jun 29, 2022 at 15:21
  • i tried , it does not work
    – CSharp-n
    Jun 29, 2022 at 15:56

1 Answer 1

0

You need to use CSS, either globally or on the corresponding Sass file (.scss) and add that to a class or ID which you then target in the CSS file.

Some styles you can change directly using raw CSS, some you have to access the Shadow DOM.

For example, your ion-button and CSS could look like this:

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

CSS:

.myButton {
    font-size: 30px
}

That will assign a font size of 30px to everywhere you use the myButton class.

Take a look at ion-button CSS custom properties for a push in the right direction.

You would also benefit from reading up on CSS and w3schools is a great starting point.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.