Можно ли изменить значение переменной, используемой в корневом селекторе компонента внутри модификатора, с помощью флага! Global - PullRequest
Новая
       19

Можно ли изменить значение переменной, используемой в корневом селекторе компонента внутри модификатора, с помощью флага! Global

0 голосов
/ 21 июня 2019

Я пытаюсь настроить повторно используемое решение для создания компонентов, наш стек основан на React, и у нас есть много распределенных частных пакетов npm, я хочу, чтобы сайт мог импортировать таблицу стилей scss и переопределить ее.переменные.

Я понимаю, что это возможно, используя флаг !global, но он ограничен.

Я пробовал это, но, похоже, не работает 

// settings file inside package:
$module-text-color: black !default;

// stylesheet for text module
// ie the default styles
.text {
  color: $module-text-color;
}

//module imported into site:
.text {
  $module-text-color: blue !global;

  &--some-modifier {
    $module-text-color: red !global;
  }
}

Идея состоит в том, что модуль имеет базовые стили и в основном использует переменные для управления некоторыми ключевыми функциями (такими как ширина, высота или цвет), и в идеале я бы хотел, чтобы импортированный компонент мог использовать модификатор дляизмените базовые значения для измененного класса.

использование будет примерно таким: 

<p className="text">this would be blue, because it overrides the global black</p>
<p className="text text--some-modifier">this would be red</p>

в моем выводе, оба элемента p черные.

возможно ли это вообще, или сообщество может порекомендовать какие-либо стратегии для создания подобной системы?

...