在我的项目中,当我导入'Ionic/core'时,它会覆盖我的scss样式

xcitsw88  于 2023-02-26  发布在  Ionic
关注(0)|答案(1)|浏览(259)

我在模板中尝试做的事情:

基本上,我试图建立一个轮时间选择器,其中有3列的小时在12h格式和分钟,这取决于什么类型的数组提供,例如:[0,15,30,45][00,30]ampm作为第3列可供选择,如果用户随时提供,则应将其用作默认值并在更新时发出事件,此滚轮将在滚动或触摸时执行所有操作
为此,我使用了ion-datetime组件

我的问题:

当我在我的项目中使用ion-datetime组件时,在我的. tsx文件中导入@ionic/core后,它会覆盖我所有的自定义scss,导入@ionic/core也会弄乱我项目中其他web组件的整个样式和样式。

我所尝试的

我试着把globalStyles添加到我的stencil.config文件中,甚至使用了不同的类名,这样它们就不会互相冲突,我使用的是最新版本的ion/core。如果有人有任何想法或建议或工作示例,请让我知道。

up9lanfz

up9lanfz1#

我找到答案了

    • 为什么会这样**

因为ion-datetimeHost是其他Web组件的Host

    • 解决方案**

您可以使用! important重新定义Host,以便在您自己的web组件中设置样式优先级。要了解如何使用Host,请参阅他们的文档https://stenciljs.com/docs/styling
或者更好的解决方案,而不是在模板中使用NPM package@ionic/core,您可以使用CDN链接

<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic.js"></script>

因为您的Web组件中可能有多个CSS样式,有时不可能重新定义所有样式

相关问题