腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在material UI中展开图标？

问如何在material UI中展开图标？
EN

Stack Overflow用户

提问于 2020-11-08 19:27:42

回答 2查看 307关注 0票数 2

我正在做一个React + material UI项目，我无论如何也想不出如何从Material UI中伸长或拉伸一个图标的宽度。

这里我有一个图标，它被包裹在一个标签中:最初我将左边距设置为自动，这样它就会被推到右边：

我想要的是汉堡包的3行图标在不增加高度的情况下一直延伸到顶部栏。如果我打开图标并将宽度设置为100，它会跳到中心，因为现在图标占据了整个元素(基本上去掉了左边距)。但是，该图标实际上并不会拉伸以填充空格：

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

现在，从技术上讲，这三条线正在穿过横杆，但现在图标的高度也变得“更大”了。我怎样才能让这个图标在不增加高度的情况下延伸到可用的空间？任何建议都很感谢，谢谢！

html

css

reactjs

material-ui

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-11-08 20:02:22

由于该图标是一个SVG对象，因此您可以尝试添加preserveAspectRatio="none"。查看此处：SVG: stretching an image

票数 1

Stack Overflow用户

发布于 2020-11-08 20:45:05

由于MUI图标是preserveAspectRatio，您可以使用viewBox和SVG对其进行拉伸。

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

渲染到这个...

有关更详细的解释，请查看here和here

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64742192

复制

如何在环境中存储配置

php

关于「在环境中存储配置」，是 The Twelve-Factor App 倡导的方法论之一。通常，应用的配置在不同环境（预发布、生产环境、开发环境等等）间会有很大差异，比如说数据库的用户名密码等等配置，通过把配置和代码分离，我们可以保证部署在不同环境的代码完全一致，如何把配置和代码分离呢？最佳实战是把配置存储到环境变量中，它可以非常方便地在不同的部署间做修改，却不动一行代码；与配置文件不同，不小心把它们签入代码库的概率微乎其微；此外环境变量与语言和系统无关。

LA0WAN9

2021/12/14

1.2K0

如何在Firefox中配置HTTP？

http 爬虫代理服务器

在浏览器中配置HTTP是一个常见的需求，它可以让我们轻松访问需要的网站或保护个人隐私。本文将为您详细介绍如何在Firefox浏览器中配置HTTP应用，帮助您实现无缝的HTTP体验。无论您是初次接触HTTP还是有一定经验的用户，本文都能为您提供实用的操作步骤和示例代码。让我们一起来配置Firefox的HTTP吧！

华科云商小徐

2023/10/10

6420

如何在Laravel 5中正确设置文件权限

网站 laravel ftp linux .net

为任何Web应用程序设置适当的文件权限是Web托管的重要部分。在本教程中，您将学习如何在Linux Web服务器上托管的Laravel应用程序上正确配置文件权限。

星哥玩云

2022/07/27

5.8K0

如何在Redhat中配置R环境

其他

R是一套完整的数据处理、计算和制图软件系统。其功能包括：数据存储和处理系统；数组运算工具（其向量、矩阵运算方面功能尤其强大）；完整连贯的统计分析工具；优秀的统计制图功能；简便而强大的编程语言：可操纵数据的输入和输出，可实现分支、循环，用户可自定义功能。本文档主要讲述如何在Redhat中使用源码方式编译安装及配置R的环境。

Fayson

2018/03/29

3.1K0

如何在 Linux 中配置 firewalld 规则

interface service

以下命令列出 FirewallD 提供的zones。运行以下命令以列出zones：

用户7639835

2021/09/01

1.4K0

如何在PyCharm中配置Tensorflow环境[通俗易懂]

python java https

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/174880.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/27

6840

如何在 Linux 中配置 firewalld 规则

tcp/ip 网络安全

“firewalld”是firewall daemon。它提供了一个动态管理的防火墙，带有一个非常强大的过滤系统，称为 Netfilter，由 Linux 内核提供。

用户9236362

2021/11/30

3.5K0

说下three.js 中的相机

图像处理渲染

所有的3D编程中都有一个避免不了的话题就是相机，相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。

程序你好

2021/07/23

1.6K0

如何在 Nginx 中配置 gRPC 的代理

nginx javascript

Nginx 在 1.13.10 中，新增了对gRPC的原生支持，Nginx 1.14.0 主线版已经发布。本文将介绍，如何配置 Nginx 中的 gRPC 服务。gRPC 服务做为一个 TCP 服务，配置方式与 HTTP/HTPTS 类似。

Debian中国

2018/12/21

16.5K0

Nginx正确配置Location

nginx html

之前已经讲过Nginx的基本配置，本篇文章主要对Nginx中Location指令的作用进行介绍。本篇文章主要对Nginx的Location配置原则进行详细的讲述。Location是根据用户请求的URI来进行不同的定位，定位到不同的处理方式上，匹配成功即进行相关的操作。首先需要先介绍一下Nginx的echo模块，它可以配置的Location标签是否正确，是否达到配置的目的。

创译科技

2019/08/30

1.2K0

聊聊如何在docker环境中配置hosts

容器镜像服务

不知道大家有没有遇到这种场景，部署在docker环境的项目，需要通过域名访问外部一些资源，但因为没有配置dns解析，因此需要通过配置hosts来进行访问。本文就来聊聊可以通过哪些方式可以在docker容器中配置hosts

lyb-geek

2023/03/28

10.2K0

如何在 Linux 中编辑配置文件？

linux

在 Linux 系统中，配置文件是用于设置和自定义应用程序和系统行为的重要组成部分。为了进行配置更改或修改，您需要编辑相应的配置文件。本文将详细介绍如何在 Linux 中编辑配置文件的常见方法。

网络技术联盟站

2023/06/25

1.2K0

pycharm安装配置环境_如何在pycharm中配置anaconda

ide 访问管理 java https

这里需要进行一下激活，我这里就用的自己的jet账号，在校大学生可以用学校的“教育邮箱”来获得使用jetbrains产品的资格，我这个就直接是在某宝购买的，不贵，让自己的账号能够进行激活（可续费）

全栈程序员站长

2022/09/27

9280

【DB笔试面试511】如何在Oracle中写操作系统文件，如写日志？

oracle tcp/ip ide 编程算法数据库

可以利用UTL_FILE包，但是，在此之前，要注意设置好UTL_FILE_DIR初始化参数。

AiDBA宝典

2019/09/30

30.4K0

three.js中的矩阵计算

opengl api 图像处理存储

three.js中自带了矩阵运算库，不过在使用的过程中总是容易混淆。不知道是行主序还是列主序，前乘和后乘也很容易弄反。就在这里辨析一下。

charlee44

2020/09/10

7.5K0

three.js中帧缓存的使用

缓存 webgl 渲染 javascript

在网上查阅了一下three.js关于帧缓存的使用，感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的，但其实我就是想获取某个时刻的渲染结果作为纹理，没必要在动态渲染中进行后处理。真正实现这个功能的是WebGLRenderTarget这个类，这是一个渲染目标的缓冲区，可以装载到WebGLRenderer中进行渲染，再从WebGLRenderTarget获取纹理对象。

charlee44

2020/06/22

4.3K0

如何在Hue中配置Impala的负载均衡

负载均衡负载均衡缓存 hadoop

在前面的文章Fayson介绍了《如何使用HAProxy实现Impala的负载均衡》、《如何使用HAProxy实现Kerberos环境下的Impala负载均衡》和《如何使用Nginx实现Impala负载均衡》。本篇文章主要基于Haproxy方式实现的Impala负载均衡在Hue中配置Impala服务的负载均衡。

Fayson

2018/03/29

3.4K1

如何在Cloudera Manager中配置Yarn放置规则

其他

Hadoop集群管理员希望能对集群Yarn作业的资源进行控制。根据不同的业务组或不同的用户，对Yarn的资源池进行划分，达到资源管控、任务管控的效果。通过CM可以进行Yarn动态资源的配置，这里Fayson主要介绍如何在Cloudera Manager中配置Yarn动态资源池的放置规则。

Fayson

2018/11/08

3.2K0

pycharm如何配置anaconda解释器_如何在pycharm中配置anaconda

python anaconda https 网络安全

python解释器有好多版本，Anaconda里面包含了python解释器，并且包含了很多其他的工具包，所以我们只安装1个Anaconda即可。

全栈程序员站长

2022/11/16

1.4K0

点击加载更多

相似问题

如何在three.js中配置点灯

如何在CMS中配置更新，如wordpress

如何在THREE.js中正确清除内存

如何在Cloudbees Jenkins中配置全局Mercurial选项(如扩展)？

如何在aws服务中(如‘s 3’、` `cloudfront`‘配置)进行源代码管理配置？

活动推荐

SaaS建站+私有服务器，拖拉式完成多端建站，5分钟搭建企业官网

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例