How to style a nested component from its parent component in Vuejs?

Question

I am going to create a layout like 'header sidebar main-content sidebar footer ' with flexbox by Vuejs. I created separate .vue files for each part of the layout , I mean something like a sidebar.vue and a header.vue and so on ....
And I am going use them in App.vue file like :

<template>
  <div id="app">
    <app-header ></app-header>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
    <app-sidebar></app-sidebar>
    <app-footer></app-footer>
  </div>
</template>

<script>
import header from "./components/header";
import sidebar from "./components/sidebar";
import content from "./components/content";
import footer from "./components/footer";

export default {
  components: {
    "app-header": header,
    "app-sidebar": sidebar,
    "app-content": content,
    "app-footer": footer
  }
};
</script>

<style lang="scss">

body {
  margin: 0;
  padding: 0;
}


#app {
  border: 3px solid red;
  min-height: 100vh;

  display: flex;
  flex-wrap: wrap;

  > * {
    border: 1px solid black;
  }
}

the main problem is I can not select these custom nested components from App.vue file to style them. for example i can not use app-header{} like other normal tags in html and css to select it and style it within style tags inside of App.vue file . is there anyway to solve it ?
NOTE : I know I can assign a class to each of these nested components and then select them to use with css class selector .

tony19 · Accepted Answer · 2019-09-13 08:01:19Z

2

I would handle this by creating a property in each of the child components (maybe HeaderClass, BodyClass, and so on). That way, any component that consumes these child components can pass whatever classes they desire and style them accordingly.

<app-header :headerclass="parent-header-class"> </app-header>

Inside of your child component, you can use these properties and v-bind the class inside the HTML, as shown in the example below:

<template>
    <div :class=`${headerClass} internal-class-example button`> </div>
</template>

Note: This does not allow you to use any scoped parent CSS to pass to the child. The classes you pass down must be global. Otherwise, the child component will not know what it is.

edited Sep 13, 2019 at 8:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 12, 2019 at 14:29

Scornwell

6057 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaya Ulman Over a year ago

The classes you pass down must be global, or (and better): use a deep selector.

Cody Over a year ago

@ShayaUlman YOUR answer should be the accepted answer :)

Collectives™ on Stack Overflow

How to style a nested component from its parent component in Vuejs?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related