如何在Material-UI IconButton中居中对齐自定义SVG图标

文章/答案/技术大牛

发布

2回答

css、reactjs、svg、material-ui、icons

我正在尝试生成一个图标按钮，如下所示： ? 到目前为止，我得到的是： ? 代码如下： import { SvgIcon, IconButton } from '@material-ui/core'; <IconButton onClick={this.playIconButtonClick} disableRipple={tr

浏览 39提问于2020-10-13得票数 0

回答已采纳

2回答

iconClassNameRight="muidocs-icon-navigation-expand-more“不工作

material-ui

全部：<link href='https://fonts.googleapis.com

浏览 3提问于2016-07-26得票数 3

回答已采纳

2回答

SVG图标与Material-UI:在哪里找到，如何样式？

svg、reactjs、material-design、material-ui

在上，它说他们可能支持的属性是"iconElementLeft ...元素...在应用程序栏左侧显示的自定义元素，如SvgIcon。“ 我现在的样式不像菜单栏上的其他东西……我指向我找到的一个svg图标，并使用img属性尝试将其放入其中。我怎样才能让Material-UI风格像原生的东西一样呢？/public/img/rocket.svg' height='40' width='40' alt=&#

浏览 0提问于2016-02-05得票数 10

回答已采纳

3回答

Material-ui svg-另一个元素中的图标不对齐

reactjs、material-ui

我在我的react项目中使用material ui库，我遇到了一个奇怪的问题，当我试图在按钮图标中使用svg图标时，icom不对齐中心。primaryText={product.title} rightIcon={<IconButton><RemoveIcon/></IconButton>}

浏览 0提问于2016-05-05得票数 4

1回答

在Material UI React js中将文本对齐为居中

reactjs、material-ui、typography、text-align

在material UI中，如何在字体中居中显示文本。我正尝试在react中创建一个导航栏，并使用material UI进行样式设置，我想在其中居中显示文本hello world。我已经尝试了内联样式和自定义主题，但没有一个对我有效。有没有人能帮我理解我的代码缺失之处。 /core'; import IconButton from '@material-ui/core/Icon&#x

浏览 67提问于2020-08-11得票数 0

3回答

Ionic - Header图标与顶部对齐

css、ionic-framework、ionic

我用制作了一个自定义字体图标，用于我的离子项目。当我将图标作为按钮应用于标题时，对齐似乎是关闭的。但每当我将图标从更改为图标时，它都工作得很好。我做错了什么？我没有应用任何自定义样式。右边的图标是自定义图标。它与顶部对齐，而Ionicons中的图标则不是。:居中。并且默认情况下，垂直对齐设置为"top“。给出中间并不

浏览 0提问于2015-11-17得票数 0

1回答

在Bootstrap 4导航栏中使用自定义图标作为按钮

twitter-bootstrap

我想在Bootstrap 4导航栏上放置一些自定义图标按钮。class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">该按钮显示在导航栏上，但它在顶部对齐我想让它居中对齐(垂直)。我尝试了所有类型的CSS样式，如页边距-顶部和填充-顶部，但它没有改变任何东西。我也试过使用“d-inli

浏览 18提问于2017-06-28得票数 0

回答已采纳

1回答

如何制作更小的单选按钮

reactjs、material-ui

我找不到一种方法来在material-ui中创建一组包含三个小(19px高)标签的单选按钮。我正在将浏览器应用程序从静态HTML/JS迁移到material-ui/react，并且我需要保持组的大小不变。我开始使用的按钮组有三个垂直对齐的小单选按钮。这是一个截图： ? 下面是我使用material-ui文档所能做的最好的代码： <FormControl size="small" &

浏览 17提问于2021-04-01得票数 0

回答已采纳

15回答

有没有办法覆盖React中npm包提供的材料UI图标的颜色？

reactjs、sass

我刚接触React，正在使用npm package Material UI图标()并在React组件中显示图标，如下所示：import KeyboardArrowRightIcon from'material-ui/svg-icons/hardware/keyboard-arrow-right';readMoreLink={<a href={someUrl} >Read more<KeyboardArrowRig

浏览 3提问于2018-06-15得票数 59

1回答

父容器具有页边距自动时的模糊字体图标

css、fonts、icons、margin、blurry

这个“只是另一个模糊的图标问题”开始让我头疼，这就是为什么我决定在这里寻求帮助。相信我，我已经读过网上所有的“模糊图标”文章了。下图显示了当您调整浏览器宽度、在奇数值和偶数值之间切换时，github.com上的字体图标所发生的情况。但问题来自于其他地方，它来自某个父元素(.container)，它使用设置为“auto”的边距/右属性对自己进行居中。所有的图标都是正确的网格对齐，他们都有字体平滑:反，并且SVG字体已经移动在前面的.ttf一。所以不，这不是这些问

浏览 4提问于2014-11-12得票数 0

16回答

如何在物料界面iconButtons中放大SVG图标？

css、svg、reactjs、material-design、material-ui

如何调整图标大小？这是一个svg图标。我刚创建了一个“创建新”组件，它是一张材料纸，顶部有一个内容添加按钮。这是密码。import Paper from 'material-ui/lib/paper'; import ContentAdd from 'material-ui/lib/svg-icons/content/ad

浏览 20提问于2016-04-07得票数 48

回答已采纳

4回答

如何编辑材料-ui-时间选择器的时间选择器？

javascript、reactjs、material-ui、timepicker

import { TimePicker } from "material-ui-time-picker"; endAdornment={ <IconButtononClick={

浏览 0提问于2019-04-18得票数 3

回答已采纳

4回答

md-按钮内的字体图标对齐

javascript、css、angularjs、font-awesome、angular-material

我试图在按钮内对齐字体令人敬畏的图标，使它们相对于工具栏上的文本居中。class="fa fa-lg"></md-icon> </div></div> 第二个图标上的fa-lg使它看起来以中心为中心，尽管我怀疑它仍然与顶部对齐。如何控制md-按钮内字体令人敬畏的<

浏览 2提问于2015-11-27得票数 13

回答已采纳

3回答

在SVG中心对齐对象

html、css、svg

如何在svg标签中心对齐对象。我可以通过调整viewbox中的x，y坐标来使其对齐。但每次我都需要根据对象的大小来改变值。如何在SVG中实现任意大小的对象居中。为了更清楚，我希望图标在红色边框内水平和垂直居中。请参考我下面的代码svg{} <svg height="20" width

浏览 0提问于2017-01-10得票数 4

12回答

如何在Material中使用SvgIcon中的SVG文件

svg、material-ui

我有一个SVG文件，我想用它做一个SvgIcon组件，我应该怎么做呢？在中，所有示例要么使用预定义的材料图标，要么使用一个奇怪的<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />表示法，我不知道它是什么！

浏览 11提问于2016-07-21得票数 77

回答已采纳

1回答

SVG图形中的材料设计图标(MDI)？

svg、icons、vuetify.js、mdi

在我的应用程序中，我需要在不同的地方使用相同的图标。in v-action的按钮在SVG图形中<v-card-actions> <v-icon right>mdi-arrow-left-circle</v-icon>

浏览 2提问于2021-09-01得票数 1

1回答

如何垂直对齐TextField中的文本和前导/尾随图标

kotlin、android-jetpack-compose、compose-desktop

是否有方法将尾随/引导图标和文本设置在相同的级别上？默认情况下，它并不如下图所示。我试图在fontStyle中更改TextField参数，但没有成功。显示的文本高于图标。

浏览 3提问于2021-11-26得票数 2

回答已采纳

1回答

在行中垂直居中对齐图标:颤动

flutter、flutter-layout、flutter-bottomnavigation

在第一个容器中，有两个带有滑块的文本小部件，第二个容器有5个图标按钮。我想减少文本和滑块之间的间距，并在垂直居中对齐play_button。我想要做的是： ? 我开发了什么： ? crossAxisAlignment: WrapCrossAlignment.center, IconButton// do something

浏览 24提问于2021-06-21得票数 0

回答已采纳

2回答

更改禁用的材料UI复选框颜色或背景颜色

javascript、css、reactjs、material-ui、makestyles

禁用的未选中复选框看起来有点太微妙了，我想让它们有灰色的背景，光标是not-allowed类型的。不幸的是，我不知道如何使用makeStyles在复选框上应用这些样式。这是我当前代码的样子： const useStyles = makeStyles((theme) => ({ cursor: 'not-allowed', backgroundColor: 'grey',})); const App = () =

浏览 45提问于2021-07-19得票数 1

回答已采纳

13回答

如何使appbar的标题居中

flutter

我正在尝试在应用程序栏中居中显示标题文本，该应用程序栏同时包含前导和尾随操作。title: new Text(widget.title, textAlign: TextAlign.center), ), // This trailing comma makes auto-formatting nicer for build methods.} 这很好用，除非标题靠左对齐title: new Cente

浏览 336提问于2017-05-15得票数 157

回答已采纳

点击加载更多