Блог

Поэтому я создаю сайт, чтобы практиковать пользовательский интерфейс материала, но карта, которую я использую, типографика просто накладывается друг на друга, а не расширяется. Подобный этому:

Как на изображении, которое вы можете видеть, Получите свой космический корабль — сегодня на линиях спирита, я хочу, чтобы это было больше похоже на то, чтобы вы получили космический корабль — сегодня. Вот стили:

 const useStyles = makeStyles((theme) => ({
    card1: {
        marginLeft: theme.spacing(12),
        marginRight: theme.spacing(12),
        textAlign: "center",
        display: "flex",
    },
    title: {
        fontFamily: "Teko"
    },
    content: {
        display: 'flex',
        flexDirection: 'column',
        marginLeft: theme.spacing(10),
        paddingRight: theme.spacing(32),
        paddingTop: theme.spacing(6),
    },
    media: {
        margin: 0,
        height: 400,
    },
}))
 

А вот и карточка:

 <Card className={classes.card1}>
                        <CardContent className={classes.content}>
                            <Typography variant="h1" className={classes.title}>Get your space ship today</Typography>
                            <Divider variant="middle"/>
                            <Typography>Travel The World</Typography>
                        </CardContent>
                        <CardMedia component="img" className={classes.media} wide image="https://wallpapercave.com/wp/wp400097.jpg">
                        </CardMedia>
                    </Card>