在Ionic 6 Vue 4.5.2中更改单页(ie组件)的背景：
在Ionic 6 Vue 4.5.2中更改单页(ie组件)的背景：
提问于 2021-08-28 20:34:42
使用Ionic 6.17 / Vue 4.5.12
目标.我希望主页有一个独特的背景色，不同于其余的SPA (即在测试期间#000000 )。
Setup...Single页面(Ionic/Vue) App....Using是一个“基本布局”组件，作为应用程序的框架。Home.vue利用‘基本布局’中的默认插槽。
问题.作用域在Home.vue中的样式不工作。正如预期的那样，非作用域的全局样式会更改每个页面的背景色，但这是不可取的(请参阅示例代码below...they中的5次尝试，只有在不使用“范围”属性并因此在全局应用的情况下，才会更改离子内容的背景色。)
问题..。是否有办法在Home.vue中使用“样式范围”来选择性地更改仅用于Home.vue？？的离子内容的背景。
BaseLayout.vue
<template>
<ion-page>
<ion-header translucent>
<ion-toolbar>
..various buttons
</ion-toolbar>
</ion-header>
<!-- DEFAULT SLOT for content -->
<ion-content class="customStyles" fullscreen id="main-content">
<slot></slot>
</ion-content>
</ion-page>
</template>
Home.vue
<template>
<base-layout>
<!-- some ionic components for content -->
</base-layout>
</template>
<style scoped>
/*Attempt 1*/
ion-content {
--background:#000000;
}
/*Attempt 2*/
ion-content {
--ion-background-color:#000000;
}
/*Attempt 3*/
ion-content.customStyles {
--background:#000000;
background: #000000;
}
/*Attempt 4*/
:host {
background: #000000;
}
/*Attempt 5*/
@media (prefers-color-scheme: light) {
ion-content {
--ion-background-color: #000000;
--ion-background-color-rgb: 0, 0, 0;
}
}
</style>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-03 10:28:30
最简单的解决方案可能是将背景色作为支柱传递给您的BaseLayout组件，如下所示：
BaseLayout.vue
<template>
<ion-page>
<ion-header translucent>
<ion-toolbar>
..various buttons
</ion-toolbar>
</ion-header>
<!-- DEFAULT SLOT for content -->
<ion-content
class="customStyles"
fullscreen
id="main-content"
:style="`--ion-background-color: ${backgroundColor}`"
>
<slot></slot>
</ion-content>
</ion-page>
</template>
<script>
export default {
props: {
backgroundColor: {
type: String,
default: 'white'
}
}
}
</script>通过将值传递给组件，您可以轻松地重写背景色：
<base-layout
background-color="#000000"
>
<!-- some ionic components for content -->
</base-layout>Stack Overflow用户
发布于 2021-09-03 10:42:08
最简单的解决方案是只向BaseLayout组件提供背景色参数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68967942
复制相关文章
相似问题
腾讯云开发者
