SCSS它们无法与Fluent UI React一起使用

问题描述

我正在使用流畅的UI react命令栏。我正在对主题元素使用SCSS他们化模式。 主题设置适用于顶级命令栏类名称，但是某些它们的显示块似乎被完全跳过了。

例如，以下所示的块永远不会执行，因此图标路径将用红色填充。

.chartCommandIcon {
    path{
        fill: red;
        @include themify{
            fill: themed('color-theme-accent');
        }
    }
}

这是另一个示例。 themify块适用于顶级commandItem样式，但不适用于dropdownMenu（流畅的UI子菜单）。 .dropdownMenu选择器确实可以工作。如果我将下拉菜单background-color: red设置在themify块之外，则会更新颜色。

.commandItem{
    @include themify{
        color: themed('color-text-rest'); // works here (top level?)
    }
}
.dropdownMenu{
    background-color: red; // works here
    @include themify{
        background-color: themed('color-bg-panel-contextual'); // not here
    }
}

任何可能导致这种情况发生的想法都将非常有帮助！谢谢：）

这是从外部程序包中获取的它们的Sifyify SCSS mixin代码。

/// Creates theme variations
///
/// @param {Map} $themes - Theme map to loop through. Optional.
@mixin themify($themes: $themes) {
    // for each theme,get its name and color variable map:
    @each $theme,$colors in $themes {
        // re-export the color map under the global scope so the
        // `themed` function below can access it inside the content:
        $theme-map: $colors !global;

        :global(.#{$default-prefix}-#{$theme}) & {
            @content;
        }

        // reset the theme-map global variable:
        $theme-map: null !global;
    }
}

/// Gets a value from the color map.
///
/// @param {String} $key - Name of the color variable
/// @param {Map} $theme-map - Theme map to use. Optional.
///
/// @returns {String} The color for the given key
@function themed($key,$theme-map: $theme-map) {
    $value: map-get($theme-map,$key);

    @if not $value {
        @error 'There is no `#{$key}` in your theme colors.';
    }

    @return $value;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）