CODEWITHSUNDEEP
vue.jssass
Petran
Petran

Reputation: 8047

vue scss scope does not work for root element

I have a component with a b-modal on the root element.

<template>
  <b-modal ref="mymodal" modal-class="my-modal">

on the scss I define some margin

<style lang="scss">
  .my-modal {
    margin-top: 100px;

This works as expected, but if I scope my scss

<style lang="scss" scoped>
  .my-modal {
    margin-top: 100px;

it doesn't work, the child elements have all css applied but the root element doesn't.

Upvotes: 1

Views: 2319

Answers (1)

dreijntjens
dreijntjens

Reputation: 4825

With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

So since the 'modal-class' will not be set on the child components root node, you have to use the deep selector (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors)

/deep/ .my-modal {
    margin-top: 100px;

Upvotes: 2

Related Questions