0

Использую react-js и библиотеку https://material-ui-next.com/demos/buttons/

Мне нужно создать компонент, представляющий из себя кнопку, которая в верхней половине содержит иконку, а в нижней - текст

import React from "react";
import {withStyles} from "material-ui/styles";
import Settings from "material-ui-icons/Settings";
import Button from "material-ui/Button";

const IconedLabel = ({classes}) => (
<section>
    <Button className={classes.iconButton} variant="raised" color="primary">
        <Settings className={classes.icon}/>
        <div className={classes.text}>Message</div>
    </Button>
</section>);

Cейчас использую такой способ, но не выполняется отрисовка под иконкой(смещено вправо как показано на картинке)

введите сюда описание изображения

1 ответ 1

4

Запиши в стили iconButton следующее:

iconButton: {
    display: flex,
    flex-direction: column,
    align-items: center,
    justify-content: center
}

Можно еще использовать для этого Material UI Grids, ссылка на документацию: https://material-ui-next.com/layout/grid/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.