Сделать материал-ui reactjs FloatingActionButton float

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

Предполагается ли мне, что я должен заставить его плавать, установив пользовательское правило css? Material-UI docs не упоминает о свойствах плавающей документации Material-UI FloatingActionButton.

Ответ 1

Действительно, для этого свойства в компоненте FloatingActionButton на данный момент нет.

Ожидание:

1) Решение с использованием встроенных стилей:

В верхней части вашего компонента добавьте:

const style = {
    margin: 0,
    top: 'auto',
    right: 20,
    bottom: 20,
    left: 'auto',
    position: 'fixed',
};

... и в вашем методе рендеринга:

render() {
    return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton>
}

ИЛИ

2) Решение с использованием файла CSS

Добавьте в свой CSS файл (например: styles.css ссылка на ваш index.html):

.fab {
    margin: 0px;
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: fixed;
};

... и добавьте компонент React:

render() {
    return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton>
}

Ответ 2

Если вы хотите манипулировать CSS в material-ui, лучше использовать функцию каррирования стилей.

Как это:

import React, {Component} from 'react';
import {Button} from "material-ui";
import {Add} from 'material-ui-icons';
import { withStyles } from 'material-ui/styles';
const style = theme => ({
  fab: {
    margin: 0,
    top: 'auto',
    left: 20,
    bottom: 20,
    right: 'auto',
    position: 'fixed',

  }
});
class MyPage extends Component{
render() {
    const {classes} = this.props;
        return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add />
    </Button>
}
export default withStyles(style)(MyPage);

Ссылка на документацию: https://material-ui.com/customization/css-in-js/

Ответ 3

Если вы создаете настраиваемую тему, вы можете использовать переопределения темы для стиля, когда в нижнем правом углу плавает FAB (плавающая кнопка действия):

import { createMuiTheme } from "@material-ui/core";

export default createMuiTheme({
    overrides: {
        MuiFab: {
            root: {
                position: 'absolute',
                bottom: '2rem',
                right: '2rem'
            }
        }
    }
});

Это будет отменять FAB для каждого использования компонентов. Вы можете использовать тот же стиль с определенным именем класса и снова переопределить его для других способов использования.

Ответ 4

Я обнаружил это в документации Material-UI. Я только сделал несколько настроек для этого. Вот результирующий код.

import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';

const useStyles = makeStyles(theme => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
}));