Question

我有一个tooltip组件，是在单独的模块中创建的，我们的代码库导入了该组件以用于其UI。

由于它已经成为UI的一部分了，因此阴影穿刺组合器（::ng-deep）的引入已使我们无足轻重，因为需要在UI中使用不同的用例。

我不想让这些组合器浮动，所以我偶然发现了CSS Variables，想知道是否有人在Angular应用程序中使用了它们，或者是否甚至可以在Angular中使用它们。应用。

问题出在这里

.tooltip {
    display: inline-block;

    ::ng-deep .tooltip-content {
        left: 50%;
    }

    ::ng-deep .tooltip-content-arrow {
        right: 125px;
    }
}

在我的tooltip组件上，我定义了以下内容：

.tooltip-content {
    left: var(--left-percent, 50%);
}

.tooltip-content-arrow {
    right: var(--right-px, 125px);
}

然后在我的host组件中，我尝试执行以下操作：

.tooltip {
    display: inline-block;

    .tooltip-content {
        --left-percent: 50%;
    }

    .tooltip-content-arrow {
        --right-px: 125px;
    }
}

但是行为保持不变，样式不生效。根据以上网站：

此技术对于设置Web组件的主题特别有用使用Shadow DOM，因为自定义属性可以遍历阴影边界。

我是否仍需要将ViewEncapsulation设置为None，还是我做错了？

谢谢

在Angular应用程序中使用CSS变量

0 个答案: