如何使用材料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;

問題1

它在左上方顯示FloatingActionButton ，我想在右下方顯示它。 這樣做的方法是什么？

問題2

為什么樣式不適用於FloatingActionButton ？

Answer 1

試試這種風格：

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

然后你使用margin，top ...但是不要使用auto on position: fixed