Vue 3 get props in style

Question

I have some problems implementing props in style tag. I have props like:

 props: {
    icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  }

And I want to use label props in Style, like:

    <style scoped lang="scss">
      .class{
        color: label;
      }
    </style>

is that possible? Because it's not working like this

Idea is actually to make a call like:

.drop-color{
    color: map-get($var, label);
  }

This will work if I define it as;

.drop-color{
    color: map-get($var, 'blue');
  }

I just need to pass prop label instead.

Check this answer - https://stackoverflow.com/a/42872117/10000229 — Zoha Malik, Sep 08 '21 at 12:10

Boussadjra Brahim · Answer 1 · 2021-09-08T12:17:20.440

1

With new script setup you're able to do it using v-bind of vue 3.2.x:

<script setup>
import {defineProps} from 'vue'

const props = defineProps({
     icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
})


</script>
  <style scoped lang="scss">
      .class{
        color: v-bind(label);
      }
    </style>

LIVE DEMO

edited Sep 08 '21 at 12:17

answered Sep 08 '21 at 12:11

Boussadjra Brahim

82,684
19
144
164

Thanks, but idea is to do something like color: map-get($products, v-bind(icon)); and this way it's not working – Rade Iliev Sep 08 '21 at 12:34
please share the whole component code and the package.json file – Boussadjra Brahim Sep 08 '21 at 12:36

score 0 · Answer 2 · answered Feb 09 '23 at 12:36

I don't think you can do that. v-bind is runtime expression, whereas map-get and other SASS specific things are transpiled to CSS at build time. So, if the key of the map is not available at build time, it won't build correctly.

But, you can import SASS variables and maps into JS and use them instead.

I don't know if SASS's builtin :export supports maps, but if it doesn't you can use third party libraries like this one:

https://www.npmjs.com/package/sass-export

Vue 3 get props in style

2 Answers2