Loading [MathJax]/jax/output/CommonHTML/config.js

社区首页 >问答首页 >如何使用Material UI Grid在React Admin中组织显示布局

问如何使用Material UI Grid在React Admin中组织显示布局
EN

Stack Overflow用户

提问于 2019-04-18 17:10:07

回答 2查看 4K关注 0票数 13

我已经在一个新的React-Admin项目中创建了许多Show视图。我希望使用Material UI的Grid组件来将它们排列成更高效、更有用的布局，而不是让这些字段形成一个单独的列。不幸的是，这会阻止React Admin的...ShowLayout组件正确地呈现其中的字段组件。

我希望能够做这样的事情：

<Show {...props}>
    <SimpleShowLayout>
        <Grid container>
            <Grid item>
                <TextField source="firstName" />
            </Grid>
            <Grid item>
                <TextField source="lastName" />
            </Grid>
        </Grid>      
    </SimpleShowLayout>
</Show>

我还尝试过创建包装器组件，以确保将正确的道具传递给Field组件，但无济于事。如何在布局中更好地排列字段？我是否必须使用自定义样式来“手动”设置显示布局内容的样式？如果是这样的话，这似乎是一种遗憾，因为RA在渲染时大量使用MUI，而且它已经提供了一个框架来实现这一点。

EN

回答 2

Stack Overflow用户

发布于 2020-09-26 12:44:15

以防有人还在这个问题上纠结--根据SimpleShowLayout在幕后的工作方式，仅仅传递道具是不够的。

我正在开发一个react-admin npm包，其中我实现了一个基本的递归GridShowLayout。它允许您根据需要嵌套任意多个<Grid>组件，如@Pedro Viera所示，react-admin fields仍然会相应地接收到所需的props。

还有一个BoxedShowLayout，你可以在这里查看它：ra-compact-ui/GridShowLayout

示例：

<Show {...props}>
    <GridShowLayout>
        <Grid container>
            <Grid >
                <TextField source="firstName" />
            </Grid >
            <Grid >
                <TextField source="lastName" />
            </Grid >
        </Grid >      
    </GridShowLayout>
</Show>

票数 2

EN

Stack Overflow用户

发布于 2019-04-18 18:01:42

我试着用网格设计我的应用程序，这简直是噩梦，我被建议使用flexboxes代替，优点是它的响应速度非常快。你可以这样做：

import { unstable_Box as Box } from '@material-ui/core/Box';

<Show {...props}>
    <SimpleShowLayout>
        <Box display="flex">
            <Box>
                <TextField source="firstName" />
            </Box>
            <Box>
                <TextField source="lastName" />
            </Box>
        </Box>      
    </SimpleShowLayout>
</Show>

并使用material-ui文档中的所需配置，如

<Box display="flex" flexWrap="wrap" justifyContent="center" alignItems="center">

票数 0

EN

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

原文链接：

https://stackoverflow.com/questions/55750821

复制

相关文章

JavaScript 点击事件小节

在初学JS的过程中，所有的事件都是一个　 onclick 但是这个事件是不太合适的。

FungLeo

2022/11/28

2.2K0

javascript 防止重复点击

var debounce = function (func, wait, lossless) { var lastTimeout, alreadyDo = false; if (typeof lossless == 'undefined') lossless = true; return function () { var context = this, args =

IT架构圈

2018/05/31

1.7K0

javascript 数组求和_javascript数组的定义

https 编程算法网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/11/11

2.1K0

javascript 模拟按键点击提交

上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.8.3.min.js"></script> <style> a { background: #009

纯粹是糖

2018/03/14

4.4K0

javascript 模拟按键点击提交

JavaScript 实现 Tab 点击切换

Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 JavaScript 来实现 Tab 点击切换的效果

Nian糕

2018/08/21

4.2K0

JavaScript 实现 Tab 点击切换

JavaScript数组

编程算法 mapreduce javascript java

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。

hotarugali

2022/03/01

1.2K0

JavaScript——数组

数组(Array)是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

岳泽以

2022/10/26

6550

JavaScript—数组

var 数组名 = new Array(); //创建空数组

Cikian.

2022/09/22

6400

javascript数组

数组也是一种数据类型，用于存放数据。在各大语言中都存在数组，但是语法由于大同小异。在JavaScript中数组也是一个非常重要的东西，所以有必要好好的了解一下。

踏浪

2019/07/31

7220

JavaScript——数组

mapreduce 编程算法 ecmascript

var colors = ["orange", "blue", "1", 2, 3]; //删除 colors.splice(0, 1); console.log("删除：" + colors.toString());//删除：blue,1,2,3 //插入 colors.splice(1, 0, "a", "b", "c"); console.log("插入：" + colors.toString());//插入：blue,a,b,c,1,2,3 //替换 colors.splice(7, 0, "d").toString() console.log("替换：" + colors.toString());//替换：blue,a,b,c,1,2,3,d

喝茶去

2019/04/16

9660

JavaScript 数组

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

RiemannHypothesis

2022/10/09

5440

Javascript数组

定义定义空数组 var arr = new Array(); var arr = []; 定义一个包含1，2，3的数组 var arr = [1,2,3]; var arr = new Array(1,2,3); 插入 push():数组的末尾加入值 //往数组中插入1，2，3，4，5，6 var arr = new Array(); for(var i = 1;i<7;i++){ arr.push(i); } console.log(a

用户1624346

2018/04/10

9750

JavaScript数组

javascript 排序数组索引字符串

JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。要取得Array的长度，直接访问length属性：

用户3519280

2023/07/07

1310

JavaScript数组

编程算法 java javascript

数组实例的find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

六个周

2022/10/28

7090

JavaScript数组

数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。

梨涡浅笑

2020/10/27

6230

JavaScript监听键盘点击事件

先添加网页监听事件，在网页内按需要知道 keyCode 的按键，比如说数字 1 就是 97

xlj

2021/07/14

2.1K0

JavaScript 数组排序

ascii javascript https java 网络安全

sort 方法默认会将元素当成字符串相互对比，也可以传入自己写的比较函数来决定排序顺序。如：

全栈程序员站长

2022/07/01

7140

JavaScript——数组对象

join push shift slice 数组

注意：当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测 iframes.

岳泽以

2022/10/26

1.5K0

JavaScript之数组

编程算法面向对象编程

Array在JavaScript里面很常用，讲真的，平时开发除了循环数组和push数组之外，对于数组的其他方法和属性几乎都是用到的时候百度。今天自己整理一些数组的概念和方法，希望自己能记住，也为了以后使用的时候有地方直接查看。当然，太基础的东西就不说了。

wade

2020/04/23

4120

Javascript[0x01] -- 数组(一)

javascript 编程算法 java

具体的还是去看书本或者一些文档吧，这里就是简单地踩个点，那么我们直接进入到问题思考环节。

江涛学编程

2020/06/19

7720

相似问题

计数器不工作了吗？

20

vba excel AutoFit单元格高度不工作

166

每个工作表上每个单元格的Excel VBA平均值

25

VBA Excel: If语句不工作

15

Excel VBA逻辑不工作

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例