原色选色板切断

Question

我用的是素色采色机

<p-colorPicker id="colorpicker" [inline]="false" [ngModel]="color" (onChange)="changeColor($event)"></p-colorPicker>

然而，当我点击着色器，面板出现时，它被切断，看起来如下：

​

​

我怎样才能让面板弹出而不是像那样被切断呢？我试着做appendTo=body，但是它没有做我想做的事情，并且破坏了面板。对如何解决这个问题有什么建议吗？

编辑：当我检查彩色选择面板时，它看起来如下所示：

​

​

你可以看到，颜色选择是隐藏在元素后面，我想要它覆盖这侧面板。这是一个棱角的材料侧面，如果这有助于提供背景，颜色选择器在其中！

Answer 1

不知道出了什么问题，但当我做了appendTo="body"，它对我和颜色选择不再是截止！

Answer 2

您可以通过添加left: unset !important和right: 0来覆盖组件的样式。

​

​

默认情况下，面板具有此计算样式。通过重置left属性和设置right属性，您将能够看到以另一种方式显示的面板。

概念证明

通过检验员，我按照我说的修改了风格。结果如下：

​

​

它解决了您正在讨论的问题，并充分显示颜色选择器。

SCSS第一类将实现

:host ::ng-deep .p-colorpicker-panel {
  left: unset !important;
  right: 0;
}

为什么!important在左边的财产？

从我在组件上看到的情况来看，左侧属性直接是面板上的内联样式。因此，如果不设置left: unset，您就会遇到一些优先级问题。内联样式具有最高优先级，并且会忽略/重写类.p-colorpicker-panel样式化的尝试。

为什么是:host ::ng-deep？

请参阅此link