Williams Williams -4 years ago 217
React JSX Question

How to add floating action button on the right-bottom side of the screen using material ui in react

I am trying to add

FloatingActionButton
on right bottom side of the screen. I am using this library http://www.material-ui.com/#/components/floating-action-button

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

import AppBar from "material-ui/AppBar";
import FloatingActionButton from "material-ui/FloatingActionButton";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import * as strings from "./Strings";
import styles from "./Styles";
import ContentAdd from "material-ui/svg-icons/content/add";

const AppBarTest = () =>
<AppBar
title={strings.app_name}
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>;

class App extends Component {
render() {
return (
<MuiThemeProvider>
<div>
<AppBarTest />
<FloatingActionButton style={styles.fab}>
<ContentAdd />
</FloatingActionButton>
</div>

</MuiThemeProvider>
);
}
}

export default App;


Styles.js

const style = {
fab: {
backgroundColor: '#000000'
},
};

export default style;


Question 1



It is showing
FloatingActionButton
on top-left side, I want to make this on right-bottom side. What is the way to do this ?

Question 2



Why style is not applying on
FloatingActionButton
?

enter image description here

Answer Source

Try this style:

const fabStyle = {
    right: 20,
    position: 'fixed'
};

and later u use margin, top... but don't use auto on position: fixed

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download