CODEWITHSUNDEEP
vue.js
eithed
eithed

Reputation: 4359

Extends in vue.js component to use parent style

I've a third party component that I'm extending - while I want to reuse template and style section, I need to alter the behaviour of it. So, the content of my vue file looks something like this:

<script>
import Foo from 'foo';
export default {
  name: 'Bar',
  extends: Foo
}
</script>

Unfortunately, while template section of Foo is reused in my Bar the same doesn't happen for the style section - I've to copy it in its entirety from Foo otherwise no styles will be applied.

How can I reuse parents style section?

Upvotes: 2

Views: 1296

Answers (1)

Marcus
Marcus

Reputation: 2321

When you define a Vue component, you have an optional section, where you can either place inline CSS or import an external file. By default, when creating a component (for the sake of argument call it any-component.vue) I will include the following section:

<style scoped>
    @import ‘./any-component.css’
</style>

The scoped parameter prevents the CSS propagating elsewhere in the DOM, so the styling is only applied to the component itself and does not corrupt other components. But depending on your needs you can remove it.

So this gives you two solutions: there is nothing to stop you either importing a CSS file into the parent without the scoped qualifier; lor, importing the same CSS file into multiple components (when you want a consistent look and feel). With a view to avoiding unintended consequences, I would opt for the latter.

Hope that helps.

Upvotes: 2

Related Questions