Issue
I have Single-File Components and I want to use it in different places like subscribe page and footer. But I want to style to be different. Is it possible to style local components?
Component file: Newsletter.vue
<template>
<form>
<label>Enter your email address here</label>
<input type="text" name="email" required/>
</form>
<button @click="subscribe" >
SUBSCRIBE
</button>
</template>
Subscribe page: Subscribe.vue
let say style Newsletter background-color green and align to left
<template>
<h2>
Subscribe to receive Newsletter
</h2>
<Newsletter></Newsletter>
</template>
<script>
import Newsletter from "@/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<style scoped>
Newsletter{
background-color: green;
text-align:left;
}
</style>
Subscribe page: Footer.vue
but in Footer, I want to style Newsletter background-color red and align center
<template>
<h2>
JOIN OUR NEWSLETTER
</h2>
<Newsletter></Newsletter>
</template>
<script scoped>
import Newsletter from "@/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<style>
Newsletter{
background-color: red;
text-align:center;
}
</style>
Solution
There are many options. You may benefit from using the ::v-deep
combinator which allows leaking the style to the child components.
Using your example with a small change:
<template>
<h2>
Subscribe to receive Newsletter
</h2>
<Newsletter class="newsletter"></Newsletter>
</template>
<script>
import Newsletter from "@/components/Newsletter.vue";
export default {
components: {
Newsletter
}
}
</script>
<!-- this is the change. Updated to have `::v-deep` to allow style to "leak" to the child component -->
<style scoped>
::v-deep .newsletter {
background-color: green;
text-align:left;
}
</style>
See more at:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Another option to consider is using global style in place of the local style and be sure that each shared class element has a unique parent.
In one component such as Subscribe:
<style lang="scss">
.subscribe {
.newsletter {
// style for this specific version of newsletter
}
}
</style>
In another component where ".somethingelse" should be the specific type of component:
<style lang="scss">
.somethingelse {
.newsletter {
// style for this other specific version of newsletter
}
}
</style>
More info about global specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Answered By - Johnny Rice
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.