如何在材质 UI 中拉伸图标？答案

【问题标题】：How to stretch out an icon in material UI?如何在材质 UI 中拉伸图标？
【发布时间】：2021-02-20 19:33:07
【问题描述】：

我正在开发一个 React + Material UI 项目，我一生都无法弄清楚如何拉长或拉伸 Material UI 中图标的宽度。

这里我有一个包含在标签内的图标：最初我将左边距设置为自动，以便将其推到右边：

我想要的是汉堡包 3 行图标一直延伸到顶部栏，而不增加其高度。如果我继续图标并将宽度设置为 100，它会跳到中心，因为现在图标占据了整个元素（基本上摆脱了左边距）。但是，图标实际上并没有拉伸以填充空间：

我还注意到，我改变大小的唯一方法是增加图标的高度。这是宽度为 100%，高度为 32rem 的情况：

现在，从技术上讲，这三条线正在穿过栏，但现在图标的高度也“更大”了。我怎样才能让这个图标延伸到可用空间而不增加它的高度？任何提示表示赞赏，谢谢！

【问题讨论】：

【解决方案1】：

由于图标是 SVG 对象，您可以尝试添加 preserveAspectRatio="none"。见这里：SVG: stretching an image

【讨论】：

【解决方案2】：

由于 MUI 图标是 SVG，您可以使用 viewBox 和 preserveAspectRatio 来拉伸它们。

<Menu 
   viewBox={'5 2 10 20'} 
   preserveAspectRatio= 'none'
   style={{
     width: '100%',
     height: '25px'
   }}
/>

渲染到这个...

更详细的解释请看here和here

【讨论】：