html - iconbutton - Hacer material-ui reactjs FloatingActionButton float

react button

Question

Después de intentar encontrar un ejemplo en el que el FloatingActionButton flota en su posición estándar de la parte inferior derecha sin resultados, acudo a usted si puede proporcionar uno porque parece ser un botón normal sin inteligencia para flotar a esa esquina de manera predeterminada.

¿Se supone que tengo que hacerlo flotar al establecer una regla de css personalizada? Los documentos de Material-UI no mencionan ninguna propiedad sobre la documentación flotante de Material-UI FloatingActionButton .

Answer 1

De hecho, no hay propiedades para esto en el componente FloatingActionButton por el momento.

Esperándolo :

1) Una solución utilizando estilos en línea:

En la parte superior de su componente, agregue:

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

... y en su método de renderizado:

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

O

2) Una solución utilizando un archivo CSS.

Agregue su archivo CSS (por ejemplo, styles.css referenciado en su index.html):

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

... y ponte tu componente React:

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

Answer 2

Si desea manipular CSS en material-ui, es mejor utilizar la función de curry con estilos.

Me gusta esto:

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);

Enlace de documentación: https://material-ui.com/customization/css-in-js/

Answer 3

Si está creando un tema personalizado, puede usar las overrides del tema para diseñar el FAB (botón de acción flotante) que está flotando en la esquina inferior derecha:

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

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

Esto anulará la FAB para cada uso de componentes. Puede usar el mismo estilo con un nombre de clase específico y anularlo de nuevo para otros usos.