Inject css to a Vue component?

Question

see below my-component.vue.This Component needs to be themable.

It needs to get extrenal css sheet as i need to allow other developers to customize its inner look.

Is there any other approach than accept a javascript object?

<template>
  <div class="container">
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
  </div>
</template>

<style scoped>
  .A {
    background-color:green;
  }
  .B {
    background-color: red;
  }
  .C {
    background-color: yellow
  }
</style>

i have experience with css in javascript from react. maybe it's ok, but it's not perfect and not intuitive to vue developers — LiranC
– LiranC, Commented Jul 24, 2017 at 12:43
Don't use scoped CSS and name the classes .component__class. — NikxDa
– NikxDa, Commented Jul 24, 2017 at 13:20

Avi Waserman · Accepted Answer · 2017-07-24 13:56:05Z

4

Inside your component:

<template>
  <div :class="boxStyle"></div>
</template>

<script>
  export default {
    props: {
      boxStyle: {
        type: String,
        default: 'box-default'
      }
    }
  }
</script>

<style lang="scss" scoped>
.box-default {
  width: 100px;
  height: 100px;
  background: black;
}
</style>

the user could use it that way:

<template>
  <div id="app">
    <my :boxStyle="'mySpecialBox'"></my>
  </div>
</template>


<script>

import myCompoentns from './components/myComponent.vue'

export default {
  name: 'app',
  components: {
    'my': myCompoentns
  },
}
</script>

<style lang="scss">
  .mySpecialBox {
    width: 250px;
    height: 250px;
    background: red;
  }
</style>

That way, the user can define any style he wants, to any class name he wishes. He just need to use the appropriate property name. The scoped styling has no side effects.

edited Jul 24, 2017 at 13:56

answered Jul 24, 2017 at 13:08

Avi Waserman

966 bronze badges

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

Comments

vovchisko · Accepted Answer · 2018-10-10 02:03:56Z

1

You can use "deep" selector to override any styles inside "scoped" component styles.

<style scoped>
.a >>> .b { /* ... */ }
</style>

Details: vue-loader/deep-selector

answered Oct 10, 2018 at 2:03

vovchisko

2,2971 gold badge24 silver badges29 bronze badges

Collectives™ on Stack Overflow

Inject css to a Vue component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related