当前位置: 首页 > 工具软件 > PrimeNG > 使用案例 >

Primeng修改组件样式

松雅昶
2023-12-01

一开始使用primeng的时候直接在scss里面限定css发现不生效,后来发现是shadow的原因。

就使用了个笨办法,当页面渲染好了使用jquery去控制

modifyPrimengCss(): void {
    const waitView = setInterval(() => {
      const inputs = $('.ui-calendar');
      if (inputs.length) {
        clearInterval(waitView);
        inputs.each((_i, j) => {
          $(j).css('width', '99%');
          const input = j.children[0];
          $(input)
            .css('width', '100%')
            .css('border', '1px solid #ced4da')
            .css('height', 'calc(1.5em + 0.75rem + 2px)')
            .css('padding', '0.375rem 0.75rem');
        });
      }
    }, 300);
  }

后来发现这样就可以了

:host ::ng-deep {
//css
}
 类似资料: