Как сделать стили во .vue-файле отключаемыми/включаемыми по условию?

Question

[Евгений Журов]

Добрый день. Стоит задача сделать стили компонентов отключаемыми. Например, передаем в props is_stylized: false, и стили не должны применяться. Грубо говоря, чтобы работало примерно как:

<style lang="scss" scoped v-if="is_stylized"></style>

Но разумеется, так не работает. Как сделать, чтобы происходило вот именно это по смыслу? Может, не через props, а еще как-то...

Answer 1

[Дима Паутов]

Ну так делайте класс по условию из props. Чё вы фигнёй страдаете

<template>
  <div
    :class="{
      myClass: isStylized
    }"
  >

  <div>
</template>

<script>
  export default {
    props: {
      isStylized: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

Comments

[Евгений Журов]

При таком подходе мы присваиваем/не присваиваем класс тегу, а не стили классу. Мне нужно, чтобы имя класса присутствовало в любом случае. Причем чтобы в обоих случаях оно было одинаковым. Меня интересует конкретно - как присваивать/не присваивать стили классам в зависимости от true/false.

[xmoonlight]

Евгений Журов, чтобы сбросить, нужно присвоить пустой стиль (задать).

[Дима Паутов]

Евгений Журов, никак вы не сделаете. Нет таких возможностей. Делайте по человечески и всё. Делайте несколько классов, 1 основной - как именование элемента, а второй как стилевой флаг для тех компонентов, которым необходимо отключать стили.

.header {
  &.styled {
    // ... тут стили
  }
}

[Евгений Журов]

Дима Турков, не, так довольно отстойно, в том смысле, что тогда придется на каждый класс вешать проверку. Я решил немного по-другому сделать - добавлять один единственный класс на весь корневой компонент, и стили классам потомков присваивать внутри этого корневого класса.

.stylized {
  .child-class { ... }
}

Плохо только то, что в любом случае эти стили все равно будут попадать в сборку, если я правильно понимаю. Просто не будут применяться. Ну хоть так...

Answer 2

[szanislo]

Полная статья на официальном ресурсе как с этим работать
Работа с классами и стилями

Comments

[Евгений Журов]

Нет, здесь нет того, что мне надо. Там речь об инлайновых стилях, которые мало того, что захламлят template и data, так еще и исключают возможность работы с препроцессорами и вынуждают вендорные префиксы писать руками.