Question

我正在尝试建立一个可重用的解决方案来创建组件，我们的堆栈是基于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元素都是黑色的。

这是完全有可能的，还是社区可以推荐任何构建类似系统的策略？

是否可以使用！global标志更改在修饰符内部组件的根选择器中使用的变量的值

0 个答案: