如何将 Material UI Button 和 TextField 对齐在同一行的同一高度？
[英]How to align a Material UI Button and TextField on the same line, at same height?
问题描述
I'm trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it;
我正在尝试从 Material UI 库中获取一个<Button>到 a) 与其旁边的<TextField>高度相同； and b) have it be aligned with that same field. b) 让它与同一个字段对齐。
Both the <Button> and the <TextField> are each inside their own <Grid> component (with a container wrapping them). <Button>和<TextField>都在它们自己的<Grid>组件中（用容器包裹它们）。
The container <Grid> has the prop alignItems="center" , which produces this result:容器<Grid>有alignItems="center" ，它产生这个结果：
It's here I'm running into difficult trying to get the height of the <Button> to match that of the input field.在这里，我遇到了困难，试图让<Button>的高度与输入字段的高度相匹配。 This must be a relatively common requirement - is there a simple way of achieving this?这一定是一个相对普遍的要求——有没有一种简单的方法可以实现这一点？
3 个解决方案
解决方案1
2 已采纳 2020-09-30 10:43:41
Given that you have each of your element in a <Grid> component themselves, this should work:鉴于您在<Grid>组件中拥有每个元素，这应该有效：
https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx
解决方案2
1 2020-09-30 10:38:17
Use container={true} for Grid to set it as a flex container.对Grid使用container={true}将其设置为弹性容器。 Aside from that, you can always leverage makeStyles to generally customize the components' style除此之外，您始终可以利用makeStyles来自定义组件的样式
MUI Grid container prop MUI Grid 容器道具
If true, the component will have the flex container behavior.
const useStyles = makeStyles({ fullHeightButton: { height: "100%" } }); function App() { const classes = useStyles(); return ( <React.Fragment> <Grid container={true}> <TextField variant="outlined"/> <Button variant="contained" color="primary">+</Button> </Grid> <br/> <Grid container={true}> <Grid><TextField variant="outlined"/></Grid> <Grid><Button classes={{root: classes.fullHeightButton}} variant="contained" color="primary">+</Button></Grid> </Grid> </React.Fragment> ); } ReactDOM.render(<App/>, document.getElementById("test"));
<body> <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script> <script type="text/babel"> const { Button, Grid, makeStyles, TextField } = MaterialUI; </script> </body>
解决方案3
0 2022-04-30 14:54:42
In my case, I had two buttons that sandwiched a TextField , where the spacing between the first button and the textfield was wrong as shown:在我的例子中，我有两个按钮夹在一个TextField中间，第一个按钮和文本字段之间的间距是错误的，如图所示：
Buttons before code addition添加代码前的按钮
My code was:我的代码是：
<CardActions className='cardactions'>
<Button variant='contained' color='error'> - </Button>
<TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
<Button variant='contained' color='success'>+</Button>
</CardActions>
Adding sx={{ marginRight:1}} to the first button corrected the issue.将sx={{ marginRight:1}}添加到第一个按钮更正了这个问题。
Buttons after code addition添加代码后的按钮
Code after addition:添加后的代码：
<CardActions className='cardactions'>
<Button variant='contained' color='error' sx={{ marginRight:1}}> - </Button>
<TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
<Button variant='contained' color='success'>+</Button>
</CardActions>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.