当我出于某种原因尝试在 Material UI 中放置带有下拉菜单的标签时,我看到了这种行为
出于某种原因,我不能让它们在同一行对齐。
这是我的组件:
const useStyles = makeStyles(theme => ({
root: {
justifyContent: 'center',
display: 'flex',
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
function DutPreferencesTab(props) {
const classes = useStyles()
const {data} = props
console.log(data)
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div style={{display: 'flex', direction: 'row'}}>
<CustomLabel text={'Relay:'} variant={"subtitle1"} />
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
)
}
CustomLabel.js
import React from 'react'
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
function CustomLabel({text, variant, styles}) {
return (
<div className={clsx(styles)}>
<Typography variant={variant} gutterBottom>
{text}
</Typography>
</div>
)
}
export default CustomLabel
我尝试了所有方法,但仍然无法使它们在同一行对齐,而且我无法弄清楚原因。就我所见,它似乎只发生在下拉菜单中。我还有其他与标签完美对齐的文本。
我错过了什么吗?
答案 0 :(得分:0)
如果您在开发工具中突出显示元素,您会看到它们是对齐的。问题只是 Select
比标签高得多,并且默认情况下元素的顶部是对齐的(实际上元素被拉伸到相同的高度,但这具有将它们排列在顶)。
当您选择一个项目并且 Select
中的标签(例如“年龄”)向上移动时,您可以更轻松地看到它为什么这么高。
解决办法是修改包裹label和select的div上的align-items
CSS属性。在这种情况下,baseline
的值似乎是最佳选择。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import CustomLabel from "./CustomLabel";
const useStyles = makeStyles((theme) => ({
root: {
alignItems: "baseline",
display: "flex"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
}
}));
export default function DutPreferencesTab(props) {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div className={classes.root}>
<CustomLabel text={"Relay:"} variant={"subtitle1"} />
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
相关 Flexbox 资源:https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items