Question 50814 in Javascript Question posted in
A very good W3school tutorial can be found here.

Is it possible to dynamically specify the class name in styles? – Javascript

I need to pass class name from script to style

<script
    lang="ts"
    setup
>
    const className = ref('some-class')
</script>

<style
    lang="sass"
    module
>
    .#{v-bind(className)}--dynamic
        pointer-events: none
</style>

In this case I get an error:
Error: expected selector.
.v-bind(className)–dynamic ━ error in interpolated output

UPD: To clarify, I use this component in various others and I need the class to be with a prefix that I pass from the parent component

Tags:

2

Answers


  1. 0

    @Ilya Degtyarenko
    You can specify your classes in the styles and use it like this:

    <template>
  <div :class="[someClass]">
  </div>
</template>

<script setup lang="ts">
  const a = 10
  const someClass = a === 10 ? "success" : "error"
</script>

<style lang="scss">
.success {
}
.error {
}
</style>
    Login or Signup to reply.
  2. 0

    Under the hood, the v-bind in style creates a CSS variable that can be updated in style attribute of the element and used as value in the CSS rule :

    <p  style="--469af010-theme_color:red;">hello</p>

    and

    p {
    color: var(--469af010-theme_color);
}

    and it’s not possible to use CSS var as class name.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search