Material UI中预定义的键值间距
是一个用于定义元素之间间距的系统。它基于 8px 的倍数，提供了一系列的预定义值，可以在开发过程中方便地使用。
Material UI中的间距值可以分为两类：外边距（margin）和内边距（padding）。它们分别用于控制元素与元素之间的间距和元素内部的间距。
在Material UI中，预定义的键值间距可以通过theme.spacing方法来访问。该方法接受一个参数，表示间距的大小，返回一个表示间距的像素值。
以下是Material UI中预定义的键值间距的一些常用值：
theme.spacing(1)：8pxtheme.spacing(2)：16pxtheme.spacing(3)：24pxtheme.spacing(4)：32pxtheme.spacing(5)：40pxtheme.spacing(6)：48pxtheme.spacing(7)：56pxtheme.spacing(8)：64pxtheme.spacing(9)：72pxtheme.spacing(10)：80px
通过使用这些预定义的键值间距，开发人员可以轻松地为元素设置一致的间距，并且在不同的屏幕尺寸下保持一致的外观。
Material UI还提供了其他一些间距相关的属性和方法，例如margin和padding属性，以及spacing()方法的变体，如theme.spacing.unit用于访问间距的单位。
在实际应用中，可以使用Material UI的Grid组件来方便地应用这些预定义的间距值。Grid组件提供了灵活的布局系统，可以轻松地创建响应式的网格布局。
腾讯云的相关产品推荐：
- 腾讯云计算服务（云服务器、云数据库、云存储等）：https://cloud.tencent.com/product
- 腾讯云人工智能服务（人脸识别、语音识别、机器翻译等）：https://cloud.tencent.com/product/ai
- 腾讯云物联网套件（物联网平台、设备开发工具等）：https://cloud.tencent.com/product/iotexplorer
请注意，以上链接仅为示例，并非广告推广。在实际使用中，建议根据具体需求选择合适的产品。
相关·内容
2回答
是否可以转换材料UI元素<Typography component="h1" variant="h5">Sign in添加到样式组件中？我也无法从material ui系统导入Box，所以在看到示例后尝试了这种方法。import Box from '@<em
浏览 2提问于2020-04-06得票数 0
我正在努力使我的材料-ui+ React仪表板的样式更好地显示在不同的屏幕上，我的自定义主题包括一个spacing设置的8：});import { makeStyles } from '@
浏览 0提问于2019-08-05得票数 1
回答已采纳
我有一个非常简单的布局，我需要有两个按钮并排在宽屏上。然而，我需要它们之间有大约10px，添加一个空白处不幸地按下了旁边的按钮。下面是我的代码： const MyComponent = () => ( <div style={{ width: '100%
浏览 22提问于2020-12-10得票数 0
回答已采纳
我在material ui中的一个纸张元素中有一个按钮。我想添加一些页边距顶部的按钮，它有一些间距之间的FullWidthTabs组件和按钮。代码： import { makeStyles } from '@material-ui/core/styles';
importBox from '
浏览 0提问于2019-11-09得票数 10
回答已采纳
3回答
我在theme.ts中为material-ui定义了原始主题import {ColorManipulator} from 'material-ui/lib/utils/';
import {Styles} from 'ma
浏览 1提问于2016-02-26得票数 8
回答已采纳
MallsNearby /> <Grid item md={6} xs={12}> </Grid>从它的来看，它的最大间距是40，但如果我想要更大的间距怎么办？我怎么才能给出比40更多的间距呢？
浏览 0提问于2018-07-09得票数 0
在material-ui中，在网格中的某些行之间设置间距的最佳方式是什么？ 例如，给定以下具有spacing={0}的网格。GridItem GridItemrow3 GridItem GridItem
row4 GridItem GridItem 目标是具有相同的网格，间距为0，但在第2行和第3行之间具有自定义间距
浏览 16提问于2019-12-25得票数 0
我遇到了这个问题，我在一个MUI网格组件中有几个材料UI卡。我希望这个网格的左侧与上面的标题完全垂直对齐。我尝试在网格容器上放置一个spacing={2}，但这导致网格项的填充也在左侧，这使得它不再与上面的标题对齐。有没有一种方法可以在不同的网格项目之间简单地在内部填充？
浏览 4提问于2021-05-26得票数 0
1回答
我是Material UI的新手，但我想增加网格列表中图像块之间的间距，我已经遵循Material UI文档中的示例，并在Stack Overflow中搜索过类似的示例，但还没有找到答案。任何对资源的帮助或指导都将不胜感激。
浏览 2提问于2016-11-10得票数 1
回答已采纳
我需要在Material UI中设置网格项之间的特定间距值。下面是我的代码： <Grid container spacing={1}> <Grid item xs={6}>Node2</Grid></Grid> 问题是我设置spacing={1}时的边距比我想要<em
浏览 48提问于2020-12-12得票数 1
我正在为桌面构建web应用程序，我发现material-ui在显示组件时浪费了很多空间。
AppBar以填充24呈现。将样式传递给appbar只是添加24，而不是覆盖。只需比较stackoverflow和material-ui appbar的菜单栏高度，如何将AppBar高度降低至少10px？
浏览 1提问于2018-04-24得票数 2
我已经创建了一个使用React和进行React的项目。<div class="row"> ...</div>但我不知道用什么组件来创建这样的间距。
我目前正在使用自<e
浏览 7提问于2019-11-07得票数 3
回答已采纳
我第一次尝试在React项目中使用Material-UI。我已经将AppBar to call抽屉放在一起，并且侧边栏中出现了一个菜单项列表。我面临的问题是他们有巨大的页边距-顶部间距。Close (X)Contact
我不确定是什么导致了额外的间距。我组装了一个与我现在使用的设计类似的模型，间距是正常的。我已经在下面包含了完整的组件。Router, Route, Redirect,
浏览 7提问于2017-03-14得票数 1
回答已采纳
我使用Material UI的网格()进行布局，但是，虽然列和行工作正常，但spacing属性似乎不起作用。我已经像这样导入了网格：import Grid from '@material-ui/core/Grid' <Grid item有人知道如何在网格中包含间距吗？
浏览 1提问于2020-02-26得票数 3
我想水平居中网格容器内的网格项目。还需要在网格项目之间留出一些间距。请找到下面的代码： import React from "react";import {Container, Grid } from "@material-ui/core";
import TextField from &
浏览 25提问于2020-12-30得票数 0
回答已采纳
我正在使用Material UI为我正在设计的web应用程序创建UI。在使用主题间距在Grid中放置了一些TextFields之后，我遇到了TextField的内部文本不再在容器内居中的问题。一旦我从应用于TextField的样式中删除了主题间距，就不会再有问题了。有人知道如何在TextField中将文本重新居中吗？谢谢。
浏览 15提问于2020-06-04得票数 0
回答已采纳
我有Material-UI TextField：并且this.props.invoice.gen_ref_num已经预加载值不幸的是，标签与内容重叠。当
浏览 1提问于2021-06-01得票数 0
如何在Material-UI Grid项之间添加边距(空白)？ 容器的间距属性仅在项上添加填充。import React from "react";import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui</
浏览 14提问于2020-01-25得票数 5
回答已采纳
我正在构建一个新的应用程序，我将通过创建一个自定义主题来修改一些引导UI元素，不仅包括颜色，还包括对UI元素和间距的修改。我是一个新手，我想知道bootstrap是否可以像material design一样同时处理明/暗主题，例如：
注意:我的后端开发使用PHP和Ajax，我们没有使用react/angular/view和那些新的javascript框架来构建前端。
浏览 14提问于2018-02-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
