Выравнивание текста и иконки в Material UI: решения

Быстрый ответ

Чтобы идеально выровнять иконку и текст на одной линии в Material UI, воспользуйтесь компонентом Box со свойствами display: flex и alignItems: center:

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import StarIcon from '@mui/icons-material/Star';

<Box display="flex" alignItems="center">
    <StarIcon />
    <Typography>Текст на одной линии с иконкой</Typography>
</Box>

Благодаря flex, иконка и текст прекрасно сочетаются, создавая естественный и аккуратный вид.

Разнообразные подходы к выравниванию

Использование компонента Stack

В Material UI v5 компонент Stack идеален для выравнивания. Он прост в использовании и отлично справляется со своей основной задачей:

import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import LinkIcon from '@mui/icons-material/Link';

<Stack direction="row" alignItems="center" gap={2}>
    <LinkIcon />
    <Typography>Сопровождающий текст</Typography>
</Stack>

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

Подробнее об этом расскажет наш спикер на видео

Выравнивание при помощи системы Grid

Компонент Grid предлагает большое количество возможностей для работы с макетом:

import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import SearchIcon from '@mui/icons-material/Search';

<Grid container direction="row" alignItems="center" spacing={2}>
    <Grid item>
        <SearchIcon />
    </Grid>
    <Grid item>
        <Typography>Поиск</Typography>
    </Grid>
</Grid>

С помощью Grid вы можете точно отрегулировать распределение пространства и выравнивание элементов, удобно управляя позиционированием даже сложно устроенных композиций.

Интеграция иконок с Typography

Для максимального упрощения задачи, интегрируйте иконки в компонент Typography:

import Typography from '@mui/material/Typography';
import LinkIcon from '@mui/icons-material/Link';

<Typography>
    <LinkIcon />
    Пример текста
 </Typography>

В этом случае, иконки и текст наследуют общие типографические установки, поддерживая гармоничный внешний вид.

Визуализация

Выравнивание элементов в Material UI можно представить как акробатический номер:

🤹‍♂️           |  Текст
Иконка в равновесии  |  🎯  Вот ваш текст 🎯
                      |  Перфектное выравнивание!

Представьте себе, что вы занимаетесь жонглированием, где иконки и текст должны находиться в балансе, создавая безупречный визуальный акцент. 🎪

.MuiSvgIcon-root: {
    vertical-align: 'middle'; // 🤹🏻‍♀️ Мастерство езды на одноколёсном велосипеде!
}

Отзывчивость и перенос строк

Управление переносом строк при помощи flexWrap

Для обеспечения адаптивности контента используйте flexWrap: 'wrap':

<Box display="flex" alignItems="center" flexWrap="wrap">
    <StarIcon />
    <Typography noWrap>Текст без переноса</Typography>
    {/* Остальные компоненты */}
</Box>

Так элементы сохранят выравнивание и смогут переходить на новую строку на устройствах с меньшим разрешением, что упрощает настройку под различные экраны.

Настройка стилей с помощью makeStyles

Если нужно применить уникальный стиль, используйте makeStyles:

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
    icon: {
        marginRight: theme.spacing(1),
        // Здесь могут быть другие стили
    },
    // Другие пользовательские стили
}));

// Используйте `classes.icon`, чтобы стилизовать компонент иконки

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

Практика в CodeSandbox

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

Полезные материалы

1. Компонент Grid в React — Material UI — ознакомьтесь с системой сеток Material-UI в официальной документации.
2. Полное руководство по Flexbox от CSS-Tricks — здесь вы найдете все необходимые сведения о CSS Flexbox.
3. Компонент иконок в React — Material UI — руководство по работе с иконками в экосистеме Material-UI.
4. Выравнивание элементов в flex-контейнерах — MDN — узнайте всё о центрировании и выравнивании элементов с помощью flexbox от MDN Web Docs.
5. Компонент Box в React — Material UI — понятное руководство по работе с компонентом Box в рамках Material-UI.
6. Компонент Typography в React — Material UI — узнайте основы работы с текстом и типографией в Material-UI.
7. CSS Flexbox (Flexible Box) — W3Schools — лаконичное и доступное введение в CSS Flexbox от W3Schools.