Material-UI Button和ButtonGroup在基线上不对齐 [英] Material-UI Button and ButtonGroup do not align on the baseline
本文介绍了Material-UI Button和ButtonGroup在基线上不对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的示例中，有人可以解释为什么Button和ButtonGroup不在基线上对齐吗?我可以在ButtonGroup元素上更改属性以使其对齐吗?
Can someone explain why Button and ButtonGroup do not align on the baseline in the example below? Is there a property I can change on the ButtonGroup element to make them align?
<!DOCTYPE html>
<html lang="en">
<head>
<title>My page</title>
<meta charset="utf-8" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<!-- Fonts to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {
Grid,
Button,
ButtonGroup
} = MaterialUI;
function App() {
return (
<Grid container alignItems="baseline">
<Grid item>
<Button variant="outlined">Cancel</Button>
</Grid>
<Grid item>
<ButtonGroup>
<Button variant="outlined">Submit</Button>
</ButtonGroup>
</Grid>
</Grid>
);
}
ReactDOM.render(
<App />,
document.querySelector('#root'),
);
</script>
</body>
</html>推荐答案
如果要对齐 baseline ，则可以使用 block覆盖而不是 display CSS inline-flex .您可以通过使用< ButtonGroup> 上的 component 道具来做到这一点.
If you want to align them baseline, you can override the display css with block instead of inline-flex. You can do this by using the component props on <ButtonGroup>.
<ButtonGroup component={Box} display="block !important">
这篇关于Material-UI Button和ButtonGroup在基线上不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
