Vue styling local components - css

Question

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>

Answer 1

This is possible! All you have to do is add the scoped attribute to the style tag.
Here is the snippet from the docs just for reference here:
<template>
<button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
background-color: red;
}
</style>
This will only apply the styles locally, to the component which contains the style tag. Keep in mind though, you really should avoid using tag selectors because they are the most generic. It's a better practice to use a class selector because it has a higher specificity, meaning it is less likely to be over-written (id selectors or inline styles take precedence). I would suggest doing something like this:
<template>
<h2>
Subscribe to receive Newsletter
</h2>
<Newsletter class="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>
In the example above, the newsletter class will make the background-color green only in this single-file component.

Answer 2

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