#css #reactjs #material-ui
#css #reactjs #материал-пользовательский интерфейс
Вопрос:
Я пытаюсь получить <Button>
из библиотеки пользовательского интерфейса материала, чтобы а) располагаться на той же высоте, <TextField>
что и рядом с ним; и б) выровнять его по тому же полю.
Оба <Button>
и <TextField>
каждый находятся внутри своего собственного <Grid>
компонента (с контейнером, обертывающим их).
Контейнер <Grid>
имеет prop alignItems="center"
, который выдает этот результат:
Именно здесь я сталкиваюсь с трудностями, пытаясь получить высоту <Button>
, соответствующую высоте поля ввода. Это должно быть относительно распространенным требованием — есть ли простой способ добиться этого?
Ответ №1:
Учитывая, что у вас есть каждый ваш элемент в <Grid>
самом компоненте, это должно сработать:
https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx
Комментарии:
1. Не совсем — это то же самое, что у меня на скриншоте. Мне нужно сделать кнопку той же высоты, что и текстовое поле, чтобы все они были одинаково выровнены.
2. ах, извините, я полностью пропустил вашу точку зрения. Итак, вам нужно
align-items: stretch
, чтобы элемент занимал все доступное пространство. Посмотрите ссылку еще раз, я ее обновил3. Не беспокойтесь — спасибо за помощь! Кажется, я все еще не могу добиться нужного эффекта; Я думаю, это потому, что я использую
Paper
компонент. Не могли бы вы взглянуть на то, что у меня есть здесь: 7271d.csb.app4. Просто удалите
margin="normal"
из своего<TextField>
s (или установите для него значение «нет»), так как это делает элемент сетки выше, и, следовательно, кнопка слишком сильно растягивается «после» поля сетки5. Ты друг-легенда. Такое простое исправление. Большое спасибо!!
Ответ №2:
Используйте container={true}
for Grid
, чтобы установить его как гибкий контейнер. Помимо этого, вы всегда можете использовать makeStyles
для общей настройки стиля компонентов
Если true, компонент будет вести себя как гибкий контейнер.
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>
Комментарии:
1. Как бы вы добились такого же результата как с
Button
иTextField
внутри их собственных соответствующихGrid
компонентов, но оба все еще упакованы в контейнер? Это проблема, с которой я имею дело2. Я бы просто прибегнул к
makeStyles
Ответ №3:
В моем случае у меня было две кнопки, которые располагались между a TextField
, где расстояние между первой кнопкой и текстовым полем было неправильным, как показано:
Мой код был:
<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>
Добавление sx={{ marginRight:1}}
к первой кнопке исправило проблему.
Код после добавления:
<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>