Css 使用popover界面设置ion select的样式

我正在创建一个带有popover接口的离子选择元素。我想风格离子选择选项，使他们跨越屏幕的宽度，但我没有尝试工作

<ion-header>
  <ion-toolbar>
        <ion-buttons slot="secondary">
                <ion-button>Cancel</ion-button>
              </ion-buttons>
              <ion-title>Messages</ion-title>
              <ion-buttons slot="primary">
                    <ion-button>Blah</ion-button>
                  </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
        <ion-select interface="popover" placeholder="Select an item">
                <ion-select-option value="nes">Lorem Ipsum is simply dummy text of the</ion-select-option>          
                <ion-select-option value="n64">Nintendo64</ion-select-option>
                <ion-select-option value="ps">Blah Blah Ipsum is simply dummy text of the</ion-select-option>
                <ion-select-option value="genesis">Sega Genesis</ion-select-option>
        </ion-select>
  </ion-toolbar>
</ion-header>

取消
信息
废话
Lorem Ipsum只是
任天堂64位游戏机
胡说八道的Ipsum只是
世嘉五代

---

我想选择选项来跨越屏幕的宽度。如果列表中的任何文本比select选项长，我可以使用

…

。

您可以使用css进行管理

.popover内容{
宽度：95%
}

如果您使用Inspect查看开发人员控制台。你会看到

ionselect

内部有一个popover包装，我们需要根据自己的需求来设计

实现你提到的目标

您需要在

global.scs中为
popover内容添加一些样式

:root {
    .popover-content {
        left: 0 !important;
        width: 100%;
    }
}

您将同时获得以下内容，
ios
和
md



注意：使用“媒体查询”进行同样的操作，并调整宽度，使其在平板电脑和iPad中不会显得笨拙。
此解决方案并不完全理想，因为它仍然需要全局css范围，但它至少更具描述性、可重用，而且不会像其他解决方案那样干扰基本的popover功能

template.html：



global.scss：

.popover-wide .alert-wrapper {
  width: 320px;
}

有没有办法做到这一点而不把它放在全球？这会影响所有的流行音乐，对吗？如果我只想改变这一个呢？你能分享完整的CSS吗。你是如何改变字体的？我想更改弹出文本的字体颜色，但如果我将其放在popover内容中，它将不起作用。这仅在我将其放在global中时起作用。有没有一种方法可以不将其放入全局？是的，您可以将其添加到特定的页面css文件或app.component.scss文件中。我检查过它是否正常工作