Material-UI Typeography gutterbottom -增加边距

Material-UI Typography gutterBottom 是 Material-UI 库中的一个组件，用于在文本元素下方添加额外的边距。

Material-UI 是一个基于 React 的开源 UI 组件库，提供了一套美观、易用的 UI 组件，帮助开发者快速构建现代化的 Web 应用程序。

gutterBottom 是 Typography 组件的一个属性，用于控制文本元素下方的边距。通过设置 gutterBottom 属性为 true，可以在文本元素下方添加默认的边距。

使用 Material-UI Typography gutterBottom 可以帮助开发者在应用程序中创建一致的文本样式，并且可以方便地控制文本元素之间的间距，提升用户界面的可读性和美观性。

应用场景：

在网页中显示段落文本时，可以使用 Typography gutterBottom 来添加段落之间的间距，使得文本更易读。
在列表或卡片中显示多个文本元素时，可以使用 Typography gutterBottom 来控制它们之间的垂直间距，提升列表或卡片的可读性。
在表单中显示标签和输入框时，可以使用 Typography gutterBottom 来添加标签和输入框之间的间距，使得表单更易于理解和填写。

推荐的腾讯云相关产品：腾讯云提供了一系列云计算产品，可以帮助开发者构建和部署各种类型的应用程序。以下是一些与云计算相关的腾讯云产品：

云服务器（CVM）：提供可扩展的云服务器实例，用于运行应用程序和托管网站。链接：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于各种应用场景。链接：https://cloud.tencent.com/product/cdb
云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。链接：https://cloud.tencent.com/product/cos
人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和工具，帮助开发者构建和训练自己的机器学习模型。链接：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，帮助开发者连接、管理和控制物联网设备。链接：https://cloud.tencent.com/product/iotexplorer

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

Material-UI Typeography gutterbottom -增加边距

material-ui

我正在运行Material-UI、v4和Typography元素，当它们都设置了gutterbottom时，它们的边际看起来都太小了。什么是正确的方法来全局添加更多的边缘底部到我的排版元素？

浏览 58提问于2019-05-30得票数 4

2回答

在实质性用户界面中，如何修改MuiBotton-endIcon的左边距？

material-ui

： display: inherit; margin-right: -4px;想要修改左边边距的}}>Menu</span>全部构成部分：import { Button } from '@material-ui/core' im

浏览 4提问于2021-01-15得票数 2

回答已采纳

2回答

Material UI - gutterBottom与段落有什么不同？

css、reactjs、material-ui

我正在研究排版组件API，还有gutterBottom和paragraph props，它们记录了完全相同的事情，如果是真的，那么边距底部将为0。下面是组件API的链接：

浏览 1提问于2018-11-07得票数 10

1回答

展开时如何去除手风琴间隙？

reactjs、material-ui、overriding、accordion

我正在尝试让Accordion MUI组件不移动，并且在它处于扩展模式时不对某些元素应用上下边距。示例如下，但它不起作用，我的组件仍然太“跳跃”(当扩展时，它增加了宽度，就像添加了一些看不见的边距) ... margin: '0px',test: { '&$expanded

浏览 28提问于2021-03-26得票数 3

1回答

如何使用现有主题的间隔？

css、reactjs、material-ui

大家好女士们， )} );在您找到的material-ui那么，如何使用web应用程序当前使用的现有主题来将页边距设置在按钮上方和下面的24 to？如您所见，我添加了必要的mt={3}和mb={3}。现在

浏览 5提问于2021-02-03得票数 0

3回答

在React Material-UI中将按钮与TextField垂直对齐

css、reactjs、material-ui

我正在使用React的Material-UI库。我正在尝试创建一个简单的表单，如下所示： ? 但是，我不知道如何将按钮与TextField对齐。我尝试更改margin-top，但它增加了整个包装器的边距。下面是它的代码沙箱。对解决这个问题有什么建议吗？

浏览 6提问于2020-01-23得票数 8

1回答

有没有办法为ReactJs中的material-ui组件提供全局类？

reactjs、material-ui、next.js

我有一些字体和颜色的全局类，但不能在material-ui排版中使用这些类。材质ui使用的库：<Typography className={'font14 contrastText'} color="primary" gutterBottom> Sell

浏览 2提问于2019-08-28得票数 1

1回答

物料界面自动完成边距调整问题

css、autocomplete、material-ui、textfield、margin

我在我的项目中使用Material-UI Autocomplete。我做了一些改动，以便当视区大小改变时，字体和组件可以调整大小。因此，我在宽度、高度和字体大小上使用了大众。然而，正如你在gif波纹中看到的，当我调整大小时，绿色酱料和蓝色/红色空间之间的差距会增加。如何确保差距也遵循初始比例？因此，基本上我希望的是整个组件缩小，差距不会增加。我一直在改变各种高度/边距，但我似乎无法解决这个问题。你可以在下面的沙箱中找到所有可用的代码。

浏览 0提问于2021-03-08得票数 0

2回答

增加视口宽度的页边距百分比

css

如何随着视口宽度的增加而增加边距的百分比？例如，如果屏幕宽度为1600 to，则边距设置为1%，当屏幕为2100 to及以上时，边距为10%。我如何在CSS中设置它？

浏览 2提问于2022-06-24得票数 -1

1回答

如何在material-ui容器中添加页边距？

material-ui

我有这个material-ui容器的例子，下面的文字只是简单地贴在容器的上端，如何添加页边距来将其向下推？另外，如何向容器添加向右/向左的边距，因为它占据了整个屏幕。

浏览 18提问于2021-09-21得票数 0

回答已采纳

2回答

如何为Appbar下的子组件设置相对页边距顶部？

css、reactjs、styling、material-ui

我使用material-ui Appbar，并将其固定在React应用程序的顶部，在我的主要组件中具有高z索引。但是，我的所有子组件都使用display-flex。我想避免任何孩子被应用程序栏阻碍。我尝试为我所有的子组件Div设置一个页边距-顶部，但由于应用程序栏会根据方向和屏幕大小调整大小，所以我可以设置固定的页边距-顶部。有解决方案吗？

浏览 14提问于2016-09-23得票数 1

2回答

如何在Material-UI中让Dialog占据80%的屏幕？

reactjs、material-ui

我正在使用Material-UI对话框，我想让它占据80%的屏幕。理想情况下，我想要这样的东西。我正在对Dialog应用边距，但它不能按预期工作。

浏览 1提问于2018-08-10得票数 2

2回答

如何进行样式设计？？组件如何使用资料-ui？

reactjs、typescript、material-ui、styled-components

import styled from "styled-components"; margin: 20px;我试着编辑这个按钮，但是它不是respond.how，我给这个按钮留页边距吗？

浏览 7提问于2022-03-20得票数 0

1回答

React material-ui速记classNames不工作？

reactjs、material-ui

"className= "mb-4" (marginBottom)或className= "p-10"(填充)不工作。你能帮帮我吗。

浏览 2提问于2019-10-25得票数 0

2回答

如何为带间距属性的物料-界面中的按钮增加页边距？

material-ui

我想添加一些页边距顶部的按钮，它有一些间距之间的FullWidthTabs组件和按钮。代码： import { makeStyles } from '@material-ui/core/styles'; import Button from '@<em

浏览 0提问于2019-11-09得票数 10

回答已采纳

1回答

如何在Material-UI Grid项之间应用边距？

reactjs、material-ui

如何在Material-UI Grid项之间添加边距(空白)？容器的间距属性仅在项上添加填充。import React from "react";import { Grid } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles&q

浏览 14提问于2020-01-25得票数 5

回答已采纳

2回答