Crea materiale-ui reactjs FloatingActionButton float

Question

Dopo aver tentato di trovare un esempio in cui FloatingActionButton fluttua nella sua posizione standard in basso a destra senza risultati, vengo da te se potresti fornirne uno perché sembra essere un normale pulsante con nessuna intenzione di fluttuare in quell'angolo per impostazione predefinita.

Si suppone di dover farlo fluttuare impostando una regola css personalizzata? I documenti materiale-UI non menzionano alcuna proprietà sul floating Material-UI FloatingActionButton documentation.

Answer 1

Infatti, nessuna proprietà per questo nel componente FloatingActionButton per il momento.

In attesa di esso:

1) Una soluzione che utilizza gli stili inline:

Nella parte superiore del componente, aggiungere:

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

... e nel vostro metodo render :

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

O

2) Una soluzione che utilizza file CSS

Aggiungere nel file CSS (es: styles.css riferimento sul index.html):

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

... e mettere sul vostro reagire componente:

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

Answer 2

Se si desidera modificare i CSS in materiale-ui, è meglio usare la funzione withStyle currying. come questo:

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() { 
    cosnt {classes} = this.props; 
     return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add /> 
    </Button> 
} 
export default withStyle(style)(MyPage);