我正在嘗試在屏幕右下方添加FloatingActionButton。我使用這個庫http://www.material-ui.com/#/components/floating-action-button 如何使用材質ui在屏幕的右下角添加浮動動作按鈕

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？

來源

2017-06-12 N Sharma

使用自動有你試圖消除頂部和左側汽車風格？你的樣式是否從styles.js中導出？ –

@JeroenWienk我認爲風格設置不正確。我也出口，但沒有變化。這裏有什麼問題？ 'const fabStyle = { backgroundColor：'＃000000' }; module.exports = fabStyle;' –

@JeroenWienk請參閱我更新的問題與更新的代碼 –

嘗試這種風格：

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

後來u使用保證金，頂......但不要position: fixed

來源

2017-06-12 14:21:25

你有一個想法，爲什麼backgroundColor不工作它http://www.material-ui.com/#/components/floating - 動作按鈕休息的東西正在工作。我將它設置爲'backgroundColor：'＃000000'' –

試試這個：' ' –

FloatingActionButton有個人配置在你的道具背景顏色：D –

如何使用材質ui在屏幕的右下角添加浮動動作按鈕

問題1

問題2

回答

相關問題