Button，ButtonGroup和版式的Material-UI网格基线对齐 [英] Material-UI Grid baseline alignment for Button, ButtonGroup and Typography
本文介绍了Button，ButtonGroup和版式的Material-UI网格基线对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我花了两天的时间来实现一个简单的目标:在此布局的基线上对齐所有文本.在Grid元素上尝试了十二种 alignItems 组合，无济于事.
I've spent two days trying to achieve a simple goal: align all text on the baseline in this layout. Tried a dozen of alignItems combinations on Grid elements, nothing worked.
<!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,
Typography
} = MaterialUI;
function App() {
return (
<Grid container style={{ borderWidth: '1px', borderStyle: 'solid' }} justify="space-between">
<Grid item xs={2}>
<Button variant="outlined">Could</Button>
</Grid>
<Grid item xs>
<Grid container spacing={1}>
<Grid item>
<Typography variant="h4">You</Typography>
</Grid>
<Grid item>
<ButtonGroup>
<Button variant="outlined">align</Button>
<Button variant="outlined">this?</Button>
</ButtonGroup>
</Grid>
</Grid>
</Grid>
</Grid>
);
}
ReactDOM.render(
<App />,
document.querySelector('#root'),
);
</script>
</body>
</html>推荐答案
找到了一种自己修复的方法！
Found one way to fix it myself!
所做的更改:
- Added alignItems="baseline" to both container grids.
- Wrapped the first Button in a ButtonGroup to make it align with the other ButtonGroup (see Material-UI Button and ButtonGroup do not align on the baseline to understand why it's necessary).
不确定这是否是最好的方法，所以我暂时不提问题.
Not sure if this is the best way to do it, so I'll leave the question open for now.
<!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, Typography } = MaterialUI;
function App() {
return (
<Grid
container
style={{ borderWidth: "1px", borderStyle: "solid" }}
justify="space-between"
alignItems="baseline"
>
<Grid item xs={2}>
<ButtonGroup>
<Button variant="outlined">Could</Button>
</ButtonGroup>
</Grid>
<Grid item xs>
<Grid container spacing={1} alignItems="baseline">
<Grid item>
<Typography variant="h4">You</Typography>
</Grid>
<Grid item>
<ButtonGroup>
<Button variant="outlined">align</Button>
<Button variant="outlined">this?</Button>
</ButtonGroup>
</Grid>
</Grid>
</Grid>
</Grid>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
</body>
</html>这篇关于Button，ButtonGroup和版式的Material-UI网格基线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
