在試圖找到FloatingActionButton浮動在其標準的右下角屏幕位置且沒有結果的示例後,如果您可以提供一個,因爲它似乎是一個普通按鈕默認情況下沒有任何意圖浮動到那個角落。使Material-ui reactjs FloatingActionButton浮動
是否應該通過設置自定義css規則來使其浮動? Material-UI文檔沒有提及有關浮動Material-UI FloatingActionButton documentation的任何屬性。
在試圖找到FloatingActionButton浮動在其標準的右下角屏幕位置且沒有結果的示例後,如果您可以提供一個,因爲它似乎是一個普通按鈕默認情況下沒有任何意圖浮動到那個角落。使Material-ui reactjs FloatingActionButton浮動
是否應該通過設置自定義css規則來使其浮動? Material-UI文檔沒有提及有關浮動Material-UI FloatingActionButton documentation的任何屬性。
事實上,目前在組件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>
}
如果要在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);