使 MaterialUI Reactjs FloatingActionButton 浮动

发布于03月07日

在try 找到一个FloatingActionButton浮动在其标准右下角屏幕位置而没有结果的示例后，如果您可以提供一个，我会来找您，因为它似乎是一个正常按钮，默认情况下不会浮动到该角.

我应该通过设置自定义CSS规则使其浮动吗？

推荐答案

实际上，目前组件FloatingActionButton中没有这个属性.

等待它:

1) A solution using inline styles :

在组件顶部，添加:

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

... 在渲染方法中:

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

或

2) A solution using CSS file

添加CSS文件(例如:index.html上引用的styles.CSS):

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

... 穿上你的react 组件:

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

实用课程推荐