Ionic 5 (Vue) ion-select & ion-select-option custom css wont change

Question

so im having a problem with ionic 5 for vue, im using ion-select & ion-select-option component. So the things i wanted to do are

1. changing the width
2. the text inside ion-select-option will break and go down making the new line when the content is long enough

and i already tried from variable.css and still not working

so this is my css code

  width: 100%;
}
.sc-ion-alert-md-h{
    --min-width: 90% !important;
}
.alert-wrapper.sc-ion-alert-md{
    color: red;
}
.select-full-width {
  /* max-width: 100% !important; */
  /* width: 100% !important; */
  padding-left: 0 !important;
  --max-width: 700% !important;
}
.alert-wrapper .sc-ion-alert-md {
  /* width: 700% !important; */
  --max-width: 700% !important;
}
.alert-radio-label .sc-ion-alert-md {
  text-overflow: unset !important;
  white-space: unset !important;
}```

Answer 1

ion-select only exposes a certain number of CSS properties that can be styled directly using CSS variables, for the rest of the CSS you will need to make use of shadow-root to style it... this also applies to ion-select-option

In fact, if you have visited the Ionic documentation on the right side of the Components name you will see a small chip saying shadow this indicates that if you wish to style this components you need to make use of shadow-root

Here is a example of how shadow-root is done inside of a component

/* Set the text color */
ion-select::part(text) {
  color: #545ca7;
}

/* Set the icon color and opacity */
ion-select::part(icon) {
  color: #971e49;
  opacity: 1;
}