前端项目实战伍拾伍react-admin+material ui-踩坑-设置tab宽度全屏

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 带你加入前端巅峰人才交流群 

import React, { Fragment,useState } from 'react'
import { List, Datagrid, TextField, EditButton, DeleteButton, BooleanField } from 'react-admin'
import {
    makeStyles,
    useMediaQuery,
    Divider,
    Tabs,
    Tab
} from "@material-ui/core";
const GeyaoList = (props: any) => {
    const [userTab,setUserTab]=useState<any>([
        { id: "ordered", name: "ordered" },
        { id: "delivered", name: "delivered" },
        { id: "cancelled", name: "cancelled" }
      ])
    return (
        <Fragment>
            <Tabs
                 variant="fullWidth"
                 centered
                // value={filterValues.status}
                indicatorColor="primary"
                // onChange={this.handleChange}
            >
                {userTab.map((choice:any) => (
                    <Tab key={choice.id} label={choice.name} value={choice.id} />
                ))}
            </Tabs>
            <List {...props} exporter={false}>
                <Datagrid>
                    <TextField source='id'></TextField>
                    <TextField source='name'></TextField>
                    <TextField source='sex'></TextField>
                    <TextField source='salary'></TextField>
                    <BooleanField source='flag'></BooleanField>
                    <EditButton></EditButton>
                    <DeleteButton></DeleteButton>
                </Datagrid>
            </List>
        </Fragment>
    )
}

export default GeyaoList

 

   variant="fullWidth"