使Material-ui reactjs FloatingActionButton浮动

Question

在试图找到FloatingActionButton浮动在其标准的右下角屏幕位置且没有结果的示例后，如果您可以提供一个，因为它似乎是一个普通按钮默认情况下没有任何意图浮动到那个角落。

是否应该通过设置自定义css规则来使其浮动？ Material-UI文档没有提及有关浮动Material-UI FloatingActionButton documentation的任何属性。

Answer 1

事实上，目前在组件FloatingActionButton中没有属性。

等着它：

1）使用内嵌样式A液：

在你的组件的顶部添加：

const style = { 
    margin: 0, 
    top: 'auto', 
    right: 20, 
    bottom: 20, 
    left: 'auto', 
    position: 'fixed', 
}; 

...在你的渲染方法：

render() { 
    return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton> 
} 

OR

2）利用溶液CSS文件

添加在你的CSS文件（例如：styles.css的在您的index.html引用）：

.fab { 
    margin: 0px; 
    top: auto; 
    right: 20px; 
    bottom: 20px; 
    left: auto; 
    position: fixed; 
}; 

...并把你的React组件：

render() { 
    return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton> 
} 

Answer 2

如果要在material-ui中操作CSS，最好使用withStyle currying函数。 是这样的：

import React, {Component} from 'react'; 
import {Button} from "material-ui"; 
import {Add} from 'material-ui-icons'; 
import { withStyles } from 'material-ui/styles'; 
const style = theme => ({ 
    fab: { 
    margin: 0, 
    top: 'auto', 
    left: 20, 
    bottom: 20, 
    right: 'auto', 
    position: 'fixed', 

    } 
}); 
class MyPage extends Component{ 
render() { 
    cosnt {classes} = this.props; 
     return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add /> 
    </Button> 
} 
export default withStyle(style)(MyPage);