我正在尝试在屏幕右下方添加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

回答

相关问题