antd和 material-ui 页面布局_material-ui 怎么创建页面布局-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40567167/article/details/107490270

本文探讨了如何利用antd和material-ui进行页面布局，特别是在创建一个包含固定高度的table和详情页的界面。左右两部分都可以在屏幕内独立滚动。关键在于布局管理和组件外包裹的div样式设置。在antd中，通过样式实现；而在material-ui中，借助withStyles高阶组件来定制样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左边是固定高度的table,右边是对应某一行的详情页，同样固定高度。
左右可以各自在屏幕内滚动
重点是利用好布局，然后加上ProblemClientTable 和 ProblemClientDetail 这两个组件外面都包了一个div, div的样式是：

  height: calc(100% - 52px);
  overflow-y: scroll;

使用antd:

import { Provider } from 'react-redux';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';

  <Provider store={store}>
	  <Row>
     	<Col span={16}>
    		<ProblemClientTable />
   		</Col>
  		<Col span={8}>
      		<ProblemClientDetail />
    	</Col>
	  </Row>
  </Provider>

使用material-ui:

import { Provider } from 'react-redux';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

<Provider store={store}>
  <div style={{ margin: -24 }}>
    <Grid container spacing={0}>
      <Grid item sm={9} xs={12}>
        <Paper className={classes.paper} elevation={1} square>
          <ProblemClientTable />
        </Paper>
      </Grid>
      <Grid item sm={3} xs={12}>
        <Paper className={classes.paper} elevation={1} square>
          <ProblemClientDetail />
        </Paper>
      </Grid>
    </Grid>
  </div>
</Provider>

上面的 classes 来自

const { classes } = this.props;

是因为用 material-ui 的 withStyles包了一层：

import { withStyles } from '@material-ui/core/styles';

然后

export default withStyles(styles)(ProblemClient);

styles来自：

import styles from '../style/style.js';

style.js里面就是定义各个组件的样式啦～～
比如：

const APP_BAR_HEIGHT = 64;
export default (theme) => ({
  paper: {
    padding: theme.spacing() * 0,
    color: theme.palette.text.secondary,
    margin: theme.spacing() * 0.5,
    height: `calc(100vh - ${APP_BAR_HEIGHT + 8}px)`,
    position: 'relative',
    overflow: 'hidden',
  },
});