CODEWITHSUNDEEP
javascriptreactjsvue.jssass
Rade Iliev
Rade Iliev

Reputation: 229

Vue 3 get props in style

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.

Upvotes: 3

Views: 4747

Answers (2)

최재원
최재원

Reputation: 1

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

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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

Upvotes: 4

Related Questions