反応の材料uiを使用して画面の右下に浮動アクションボタンを追加する方法

Question

画面の右下にFloatingActionButtonを追加しようとしています。私は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; 

それは左上側にFloatingActionButtonを示している1

質問、私は右下側にこれを作りたい、このライブラリを使用しています。これを行う方法は何ですか？

質問2

スタイルはFloatingActionButtonに適用されていないのはなぜ？

Answer 1

このスタイルを試してみてください：トップ、

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

以降uはマージンを使用...しかしposition: fixed