I have been attempting to place the FloatingActionButton on the bottom right corner of the screen. To achieve this, I am utilizing the following 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
The current placement of the FloatingActionButton is at the top-left side, but I desire to position it on the bottom-right side. How can I accomplish this?
Question 2
Why are styles not being applied to the FloatingActionButton?