将样式传递给组件-Java 学习之路

我正在研究一个“漂亮的选择”组件，我想，一旦我有它运作良好，我会把它用于人们审查/使用（这是我必须弄清楚的另一件事） . 我想弄清楚的一件事是，如果有人想要使用我的组件，我想让它们设计它，我怎么能这样做？

我知道我可以将类/结构公开，然后允许用户使用 /deep/ 传递样式，但我注意到那里有一些优先级问题，尽管这似乎是一种更理想的方法 . 我也知道我可以在组件上创建输入以传入样式对象并使用 [ngStyle] 指令，但这可能会变得复杂，特别是如果用户想要将相同的样式传递给组件的多个部分 .

组件的结构是：

<div class="wrapper" [class.open]="showOptions">
    <ul class="options">
        <li *ngFor="let option of options" (click)="selectOption(option)">{{option.label}}</li>
    </ul>
    <div class="current" (click)="toggleOptions()">{{value.label}}</div>
    <div class="dropdown" (click)="toggleOptions()"></div>
</div>

我可以将 [ngStyle] 附加到每个，但这看起来很麻烦 . 有更好的方法，还是我最好的方式？

1 回答

1
update

::slotted 现在受到所有新浏览器的支持，可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

你可以使用 ngStyle ，或者使用 ::ng-deep 从外面设置样式
```
* ::ng-deep child-comp dive.wrapper {
  border: solid 3px red;
}
```
您还可以使用SASS和路径变量来允许用户使用环境变量配置SASS导入 .
回复于 2024-04-19T07:23:04+08:00

将样式传递给组件

1 回答

相关问题