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.