Как центрировать кнопку в пользовательском интерфейсе материала
Я не мог понять, как центрировать кнопки в пользовательском интерфейсе материала. Это код, который у меня есть:
function BigCard(props) {
const { classes } = props;
return (
<div>
<Card className = {classes.card}>
<CardContent>
<Typography variant = "display1" className = {classes.title}>
Start Funding!
</Typography>
</CardContent>
<CardActions >
<Button size = "small" color = "primary" className = {classes.actions}>
Share
</Button>
<Button size = "small" color = "primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
Как я могу центрировать мою кнопку?
Ответы 8
вы можете использовать переопределить с классами в документе ui материала,
ПЕРВЫЙ ПУТЬ
Вы можете сделать что-то вроде:
//Add your justify css in your styles const
const styles = {
...
root: {
justifyContent: 'center'
}
};
И используйте свойства классов, чтобы добавить это в свой компонент CardActions:
<CardActions classes = {{root: classes.root}}>
ВТОРОЙ ПУТЬ (проще)
ИЛИ Вы можете использовать стиль непосредственно в своем компоненте, но я советую вам научиться использовать классы, если вы много работаете с material-ui.
Просто сделайте что-нибудь вроде:
<CardActions style = {{justifyContent: 'center'}}>
Для случаев использования, которые избегают определения css
<Grid container justify = "center">
{props.children}
</Grid>
То, что я пробовал, показано ниже, а также показано в официальных видеороликах пользовательского интерфейса материала на YouTube.
<Grid item xs = {12} sm = {12} md = {4} lg = {4}
style = {{
textAlign:'center' // this does the magic
}}
>
<Button>
NEXT
</Button>
</Grid>
Спасибо и наилучшие пожелания
Пробовал все вышеперечисленное, и ничего из этого не сработало, кроме этого!
Вы можете использовать элемент Box
<Box textAlign='center'>
<Button variant='contained'>
My button
</Button>
</Box>
Вы должны использовать два свойства: display и justify-content.
<CardActions display='flex' justifyContent='center'>
Быстро и грязно:
<Button style = {{margin: '0 auto', display: "flex"}}>
NEXT
</Button>
Это будет центрировать вашу кнопку по горизонтали
<Button
size = "medium"
variant = "contained"
color = "primary"
style = {{
display: "flex",
flexDirection: "row",
justifyContent:"center",
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
}}
>
Get Hired
</Button>
Вот как я это сделал с Material - UI
import {Typography, Button} from '@material-ui/core';
<Typography align='center'>
<Button
color='primary'
size='large'
type='submit'
variant='contained'
>
Sign Up
</Button>
</Typography>
Добавьте код в виде текста вместо изображений. Также попробуйте добавить минимальный проверяемый пример: stackoverflow.com/help/mcve