ionic-4 Text-wrap на ion-select-option - PullRequest
1 голос
/ 20 мая 2019

HTML

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
      <ion-select-option value="brown" text-wrap>Brownasdfasdfasdfasdfadfadsfasdfadfasdfafdsadfaf</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

image

SASS:

ion-select-option{
   ion-label{
     white-space: normal !important;
   }
}

Я не могу переопределить существующий white-space: nowrap

Я хотел бы знать, как переопределить shadow-dom css

1 Ответ

2 голосов
/ 20 мая 2019

Поскольку у этого веб-компонента нет атрибута, это делает его немного сложным и грязным

global.scss:

.item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
     white-space: normal !important;
}

//or just 

 .sc-ion-label-md-h{
     white-space: normal !important;
}

Это отменяет классы стилей компонентов.

enter image description here

...