前端项目实战叁佰肆拾玖react-admin和material ui-头部样式布局

最新推荐文章于 2024-09-30 15:42:36 发布

前端歌谣

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量44

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132225665

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

import { AppBar, Box, Card, CardContent, CardHeader, Container, Divider, Grid, ListItem, ListItemText, Toolbar, Typography } from '@mui/material';
import { Labeled } from 'react-admin';
interface IItem {
    style_name?: string,
    code?: string,
    create_date?: string
}
interface IMaterialStyleTitle {
    styleRecord?: IItem
}
export const MaterialStyleTitle = (props: IMaterialStyleTitle) => {
    const { styleRecord } = props
    return (
        <div>
            <Box>
                <CardContent>
                    <Divider>款式信息</Divider>
                </CardContent>
                <CardContent>
                <Grid container spacing={1}>
                <Grid item xs ={6} sm = {16} md = {3} >
                    <Labeled source='款式'>
                        <ListItemText primary={styleRecord?.style_name} />
                    </Labeled >
                    </Grid>
                    <Grid item xs ={6} sm = {16} md = {3} >
                    <Labeled source='编号'>
                        <ListItemText primary={styleRecord?.code}/>
                    </Labeled>
                    </Grid>
                    <Grid item xs ={6} sm = {16} md = {3} >
                    <Labeled source='创建日期'>
                        <ListItemText primary={styleRecord?.create_date} />
                    </Labeled>
                    </Grid>
                    </Grid>
                </CardContent >
            </Box>
        </div>
    )

}