如何更改 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)

菜单本身如下所示：

我做错了什么？

Answer 1

<p-menu> 有“ui-menu”。使用

在组件样式表中为其设置样式

• ::ng-deep

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

Demo

• ViewCansulation 已关闭：

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

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

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

Demo