Wie Floating Action-Taste auf der rechten unteren Seite des Bildschirms mit Material Ui in reagieren

Question

Ich versuche, FloatingActionButton auf der rechten unteren Seite des Bildschirms hinzufügen. Ich bin mit dieser Bibliothek 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; 

Frage 1

Es FloatingActionButton auf oberen linken Seite zeigt, möchte ich dies auf der rechten unteren Seite machen. Wie soll man das machen?

Frage 2

Warum Stil nicht FloatingActionButton auf bewirbt?

Answer 1

Versuchen dieser Art:

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

und u verwenden später Rand, oben ... aber Auto nicht auf position: fixed