0

我正在使用流畅的 UI 反应命令栏。我正在使用 SCSS 主题化模式来主题元素。主题适用于顶级命令栏类名称，但某些主题化块似乎完全被跳过。

例如，下面显示的块永远不会执行，因此图标路径将具有红色填充。

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

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

.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
    }
}

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

这是从外部包中获取的themify 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;
}
4

0 回答 0