如何使 MUI 堆栈中的最后一项与底部对齐？答案

【问题标题】：How to make last item in MUI stack align to bottom?如何使 MUI 堆栈中的最后一项与底部对齐？
【发布时间】：2023-01-28 11:54:10
【问题描述】：

我正在使用 MUI Grid 创建模态组件，但我希望 Button 位于底部。

const styles = {
    modalBox: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        minHeight: '55%',
        maxHeight: '80%',
        maxWidth: '600px',
        bgcolor: '#ffff',
    },
}

下面是ModalComponent.js

        <Modal
         ...
        >
            <Grid container sx={styles.modalBox} spacing={1} direction='column'  >
                <Grid item xs={12} height='auto'>
                    <Typography variant="h5">
                        List Title
                    </Typography>
                </Grid>
                <Grid item xs={12} height='100%' justifyContent='space-between'> //
                    <List height='100%'>
                        <ListItem>
                            one
                        </ListItem>
                        <ListItem>
                            two
                        </ListItem>
                        <ListItem>
                            three
                        </ListItem>
                    </List>
                    <Button variant="contained">
                        Create New List
                    </Button>
                </Grid>
            </Grid>
        </Modal>

我以为输入 height='100%' 和 justifyContent='space-between' 可以解决我的问题，但这些道具似乎什么都不做。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

设置display:flex和justifyContent:space-between Grid是List的父级，然后将flex-grow-1 设置为List。

<Grid item xs={12} style={{display:'flex',height:'100%',flexDirection: 'row';justifyContent='space-between'}} > 

                <List style={flex-grow:'1'}}>
                    <ListItem>
                        one
                    </ListItem>
                    <ListItem>
                        two
                    </ListItem>
                    <ListItem>
                        three
                    </ListItem>
                </List>
                <Button variant="contained">
                    Create New List
                </Button>
            </Grid>

【讨论】：

谢谢你的回答，但这似乎不起作用。
我再次更新了代码。检查一下。

【解决方案2】：

你可以：

将justifyContent={ 'space-between' }添加到顶部<Grid container>，
将<Button>组件放入它自己的<Grid item>中，并且

将剩余的项目放入单个 <Grid item container> 中以将它们与按钮分开。

这个jsFiddle demo显示了结果（点击跑步看演示）。下面展示了demo中的代码（JavaScript代码是在demo中编译的，看不到）。

索引.html

<!DOCTYPE html>
<html>

    <head>
        <title>Material-UI Autocomplete Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <div id="testContainer" class="testContainer"></div>
        <script src="./index.js"></script>
        <noscript> Please enable javascript to view the site </noscript>
    </body>

</html>

索引.jsx

// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import Typography from '@mui/material/Typography';
import Backdrop from '@mui/material/Backdrop';

const container = document.getElementById( 'testContainer' );

const styles = {
  modalBox: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    minHeight: '55%',
    maxHeight: '80%',
    maxWidth: '600px',
    bgcolor: '#ffff',
  },
}

const TestModal = () => {
  const [ open, setOpen ] = React.useState( true );

  const handleClose = () => { setOpen( false ) };

  return (
    <Modal
      open={ open }
      onClose={ handleClose }
      BackdropComponent={ Backdrop }
    >
      <Grid
        container
        sx={styles.modalBox}
        spacing={1}
        direction='column'
        justifyContent={ 'space-between' }
      >
        <Grid item container>
          <Grid item xs={12} height='auto'>
            <Typography variant="h5">
              List Title
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <List height='100%'>
              <ListItem>
                one
              </ListItem>
              <ListItem>
                two
              </ListItem>
              <ListItem>
                three
              </ListItem>
            </List>
          </Grid>
        </Grid>
        <Grid item>
          <Button variant="contained">
            Create New List
          </Button>
        </Grid>
      </Grid>
    </Modal>
  );
};

ReactDOM.render(
  <TestModal />,
  container
);

【讨论】：