Html 使 material-ui reactjs FloatingActionButton 浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35828991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make material-ui reactjs FloatingActionButton float
提问by Franco
After trying to find an example where the FloatingActionButton floats at its standard bottom-right screen position with no results, I come to you if you could provide one because it seems to be a normal button with no inteligence to float to that corner by default.
在尝试找到一个 FloatingActionButton 浮动在其标准右下角屏幕位置而没有结果的示例之后，如果你能提供一个，我会来找你，因为它似乎是一个普通按钮，默认情况下没有智能浮动到那个角落。
Is it supposed I have to make it float by setting a custom css rule? Material-UI docs doesn't mention any property about floating Material-UI FloatingActionButton documentation.
是否应该通过设置自定义 css 规则使其浮动？Material-UI 文档没有提到任何关于浮动Material-UI FloatingActionButton 文档的属性。
回答by Gauthier Poulet
Indeed, no property for this in the component FloatingActionButton for the moment.
事实上，目前在组件 FloatingActionButton 中没有这个属性。
Waiting for it :
等待它：
1) A solution using inline styles :
1）使用内联样式的解决方案：
At the top of your component, add :
在组件的顶部，添加：
const style = {
margin: 0,
top: 'auto',
right: 20,
bottom: 20,
left: 'auto',
position: 'fixed',
};
... and in your render method :
...并在您的渲染方法中：
render() {
return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton>
}
OR
或者
2) A solution using CSS file
2）使用CSS文件的解决方案
Add in your CSS file (ex : styles.css referenced on your index.html) :
添加您的 CSS 文件（例如：在您的 index.html 上引用的 style.css）：
.fab {
margin: 0px;
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: fixed;
};
... and put on your React component :
...并穿上你的 React 组件：
render() {
return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton>
}
回答by milad nekooei
If you want to manipulate CSS in material-ui, its better to use withStyles currying function.
如果你想在 material-ui 中操作 CSS，最好使用 withStyles 柯里化功能。
Like this:
像这样：
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() {
const {classes} = this.props;
return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add />
</Button>
}
export default withStyles(style)(MyPage);
Documentation link: https://material-ui.com/customization/css-in-js/
回答by Sofonias Abathun
I actually found this on the Material-UI documentation. I just made a few tweaks to it. Here's the resulting code.
我实际上在Material-UI 文档中找到了这个。我只是对它做了一些调整。这是生成的代码。
import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
const useStyles = makeStyles(theme => ({
fab: {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
},
}));add this to your component
将此添加到您的组件中
const classes = useStyles();
return (
<Fab color="primary" aria-label="add" className={classes.fab}>
<AddIcon />
</Fab>
);回答by Sofonias Abathun
If you are creating a custom theme you can use the theme overridesto style the FAB (Floating Action Button) is floating in the bottom right corner:
如果您正在创建自定义主题，您可以使用主题覆盖来设置浮动在右下角的 FAB（浮动操作按钮）的样式：
import { createMuiTheme } from "@material-ui/core";
export default createMuiTheme({
overrides: {
MuiFab: {
root: {
position: 'absolute',
bottom: '2rem',
right: '2rem'
}
}
}
});
This will override the FAB for every component usage. You can use the same style with a specific class name and override it again for other usages.
这将覆盖每个组件使用的 FAB。您可以使用具有特定类名的相同样式并再次覆盖它以用于其他用途。
