javascript - 如何更改 p-menu 组件的宽度/填充？

Question

我用 primeNG 的 p-menu 组件制作了一个菜单，我希望将菜单项向左移动一点。我想我应该为此使用填充，我尝试了以下方法将其移动几个像素。

<p-menu [model]="items" [style]="{minWidth:'18.8em', background: 'white', 
                              padding: .625em 0 0 0}"></p-menu>

但这给了我一个语法错误，这是堆栈跟踪：

[错误->]）在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639) 在 compiler.js:22549 在 Object.then (compiler.js :206) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

菜单本身如下所示：

我究竟做错了什么？

标签： javascriptangularprimeng

Answer 1

有<p-menu>'ui-menu'。在组件样式表中使用

• ::ng-深

  ::ng-deep .ui-menu { padding: .625em 0 0 0 }

演示

• ViewCansulation 关闭：

  import { ViewEncapsulation } from '@angular/core';

  ...
  @Component({
    ...
    encapsulation: ViewEncapsulation.None
  })
  

  .ui-menu { padding: .625em 0 0 0 }

演示