首页 > 其他分享 >前端项目实战叁佰肆拾肆react-admin和material ui-设置布局最小高度

前端项目实战叁佰肆拾肆react-admin和material ui-设置布局最小高度

时间:2023-09-02 10:33:00浏览次数:35  
标签:const admin material react appLayout ui


const appLayout = (props: LayoutProps) => {
  return (
    <Layout
      sx={
        {
          '& .RaLayout-appFrame': {
            minHeight: '100%',
            height: '100%',
            margin: 0,
            padding: 0
          },
          '& .RaList-actions': {minHeight: 0, height: '48px'},
          '& .RaLayout-content:': { marginTop: 0, marginBottom: 0, padding: 0, minHeight: '100%', height: '100%' },
          '& .RaLayout-contentWithSidebar': { margin: 0, padding: 0, minHeight: '100%', height: '100%' },
          minHeight: '100%',
          height: '100%',
          margin: 0,
          padding: 0,
        }
      }
      {...props}
      appBar={appBar}
      menu={useAppMenu}
      sidebar={mySidebar}
    />
  )
}

运行结果

 

前端项目实战叁佰肆拾肆react-admin和material ui-设置布局最小高度_前端

标签:const,admin,material,react,appLayout,ui
From: https://blog.51cto.com/u_15460007/7330791

相关文章

  • fastAdmin api方法解析
    准备工作:1.fastAdmin伪静态设置参考:ThinkPHPURL重写:https://www.kancloud.cn/manual/thinkphp5/177576Nginx:/conf/vhosts/hostname.conf2.FeHelper插件安装参考:Web开发者助手FeHelper:https://www.baidufe.com/fehelper/index/index.html一、api方法解析1.api/controller/Demo.p......
  • 轻松理解Vue和React的异同
             在前端界,Vue和React最近几年一直是我们开发前端项目的两个主流选项。但作为一个想要学习使用框架最快速开发应用的新人我应该先学习哪个?或者说当我们在开发一个新项目时,到底具体是应该选择用Vue呢?还是应该选择用React?这两个的区别是什么?联系是什么?这篇......
  • [React Typescript] Fixing forwardRef's Type
    FixforwardRefgloballyTojumpaheadtothesolution,uncommentingthefollowingcodefromStefanBaumgartnerwillgloballyoverridethevalueof forwardRef:declaremodule"react"{ functionforwardRef<T,P={}>( render:(props:P,r......
  • [React Typescript] Strongly type Shared props for multiple components (React.FC<
    import{Equal,Expect}from"../helpers/type-utils";typeInputProps=React.ComponentProps<"input">;constCOMPONENTS={text:(props)=>{return<input{...props}type="text"/>;},number:(p......
  • BUUCTF [HCTF 2018]admin
    寻找破解知识点方法1-Flasksession伪造首先,先注册一个再登录,在changepassword那里查看源码,可以看到有提示:原链接已经404,看的这一个https://github.com/Wkh19/hctf_flask这是一个flask模板,这样来看,这是一道模板注入类型的题目。Session机制详解session可以在此处查看......
  • [React Typescript] Strongly type Render prop
    1.React.ReactNodeimport{useState}from"react";import{createPortal}from"react-dom";import{Equal,Expect}from"../helpers/type-utils";interfaceModalChildProps{isOpen:boolean;openModal:()=>void;......
  • ref() reactive() 声明响应式状态
    ref函数 使用ref函数将普通数据变成响应式数据reactive函数 把对象和数组这类复合数据类型数据变成响应式数据<template> <span> <spanid="num">{{num}}</span> <inputtype="button"value="+1"@click="f1"> <ul> <liv......
  • [React Typescript] Strongly Typing Lazy Loaded Components with Generics
    Navigatingtothetypedefinitionfor lazy by CMD+click inlocalVSCode,orinthe DefinitelyTyped repo.Wecanseethefollowingdefinition:functionlazy<TextendsComponentType<any>>( factory:()=>Promise<{default:T}>):L......
  • fastadmin结合layer关闭指定弹窗
    parent.Layer.closeAll(1);//关闭所有弹窗varindex=parent.layer.getFrameIndex(window.name);parent.layer.close(index);//先得到当前ifame层的索引,再执行关闭当前显示页面parent.$("#customer").bootstrapTable("refresh");//关......
  • React加载组件后自动触发某函数,而不需要点击按钮
    问题在项目中使用了ReactToPrint来实现打印,但是trigger属性中的按钮需要点击才能执行打印。期望能在组件加载完成时自动执行打印方法。解决可在组件加载完成时,通过id获取组件,并执行该组件的click方法。代码如下:importReact,{useRef,useEffect}from'react';//.........