如何解决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 举报,一经查实,本站将立刻删除。