如何更改p菜单组件的宽度/填充？

Question

我已经使用primeNG的p-menu组件创建了一个菜单，我希望将菜单项更多地向左移动。我想我应该使用填充，我尝试以下几个像素。

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

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

  

[错误 - ＆gt;]）       在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents   （compiler.js：22639）       在compiler.js：22549       at Object.then（compiler.js：206）       在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents   （compiler.js：22548）

菜单本身如下：

我做错了什么？

Answer 1

<p-menu>有＆＃39; ui-menu＆＃39;。使用

在组件样式表中对其进行样式设置

• :: 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