Angular Material mat-sidenav 宽度比 CSS 中设置的值小 1 像素

Posted 2023-03-06

【中文标题】Angular Material mat-sidenav 宽度比 CSS 中设置的值小 1 像素

【英文标题】：Angular Material's mat-sidenav width is 1 pixel less than the what is set in CSS

【发布时间】：2019-09-24 13:56:00

【问题描述】：

嘿，我正在尝试设置 Angular Material SideNav，在完成基本布局设置后，我注意到 SideNav 打开（未结束）时右侧出现一条白线。在开发工具中查看它时，它比我设置的宽度小 1 个像素。

所以 mat-sidenav 宽度比我在 CSS 中设置的值小 1 个像素。我将它设置为 240，然后它返回 239，这使得它比预期的小 1 个像素，并暴露了它下面的白色。请看下面的截图。

我创建了一个 stackblitz 来重现这个问题。

https://stackblitz.com/edit/angular-skcmty?embed=1&file=app/sidenav-overview-example.html

【参考方案1】：

mat-sidenav 似乎具有1px 的border-right 属性。你可以在你的css中改变它：

 mat-sidenav
   border-right:0px;
 

【讨论】：

谢谢，@Jojofoulk 已修复！不敢相信我没有看到。不知道为什么它有一个边框，它在 v5.x 中并不是那样的，但是已经有一段时间了，所以感谢你抓住它！ :)