Faire flotter le matériau-iu reactjs FloatingActionButton
après avoir essayé de trouver un exemple où le bouton Flotteractionbutton flotte à sa position standard en bas à droite de l'écran sans aucun résultat, je viens à vous si vous pouviez en fournir un parce qu'il semble être un bouton normal avec aucune intention de flotter à ce coin par défaut.
Est-il censé que j'ai à faire flotter par la définition d'une règle css personnalisé? Material-UI docs ne mentionne aucune propriété sur le flottant Material-UI FloatingActionButton documentation.
2 réponses
en effet, aucune propriété pour cela dans le composant Floatingaction Button pour le moment.
en Attente pour elle :
1) une solution utilisant des styles inline :
au haut de votre component, ajoutez:
const style = {
margin: 0,
top: 'auto',
right: 20,
bottom: 20,
left: 'auto',
position: 'fixed',
};
... et dans votre méthode de rendu :
render() {
return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton>
}
OR
2) une solution utilisant le fichier CSS
ajouter dans votre fichier CSS (ex : styles.css référencé sur votre index.HTML) :
.fab {
margin: 0px;
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: fixed;
};
... et mettre sur votre Réagissent composant :
render() {
return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton>
}
si vous voulez manipuler CSS dans material-ui, il est préférable d'utiliser la fonction withstyle currying. comme ceci:
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);