前端项目实战肆拾陆-​react-admin+material ui-踩坑-layout-appbar

简介: 前端项目实战肆拾陆-​react-admin+material ui-踩坑-layout-appbar
<Admin
            dataProvider={dataProvider}
            layout={appLayout}
            i18nProvider={i18nProvider}
          >
            <Resource name='t_order' list={OrderList} create={OrderCreate} 
edit={OrderEdit} />
            {/* <Resource name='t_prod_category' list={
              CategoryList
            } /> */}
          </Admin>
const appLayout = (props: LayoutProps) => {
  return (
    <Layout
      sx={
        {
          '& .RaLayout-appFrame': {
            minHeight: '100%',
            height: '100%',
            margin: 0,
            padding: 0
          },
          '& .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}
    />
  )
}

appBar={appBar}控制头部显示

image.png

相关文章
|
5天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
5天前
|
开发框架 前端开发 开发者
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
【4月更文挑战第30天】Flutter框架支持Material Design和Cupertino Design两种设计风格,助力开发者创建吸引人的移动应用。Material Design基于现实世界物理规律,提供`Scaffold`、`Card`等组件,实现纸片效果和直观体验。Cupertino Design注重简洁图标和流畅动画,借助`CupertinoTabScaffold`、`CupertinoActivityIndicator`等组件呈现苹果风格界面。Flutter的`Theme`类允许统一管理应用样式,开发者可根据需求混搭两种风格,实现跨平台的优质用户体验。
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
|
5天前
|
前端开发 JavaScript
详解React:Props构建可复用UI的基石
详解React:Props构建可复用UI的基石
17 0
|
5天前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
34 0
|
5天前
|
开发框架 前端开发 JavaScript
深入探究React:前端开发的利器
深入探究React:前端开发的利器
23 1
|
5天前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
18 0
|
5天前
|
前端开发
利用React Hooks优化前端状态管理
本文将深入介绍如何利用React Hooks优化前端状态管理,包括Hooks的概念、使用方法以及与传统状态管理方式的对比分析,帮助前端开发人员更好地理解和应用这一现代化的状态管理方案。
|
5天前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
81 0
|
5天前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)
|
5天前
|
开发框架 JavaScript 前端开发
探索前端开发框架:React、Angular 和 Vue 的对决(三)
探索前端开发框架:React、Angular 和 Vue 的对决(三)