Сделать материал-ui reactjs FloatingActionButton float

Question

После попытки найти пример, когда FloatingActionButton плавает в своем стандартном нижнем правом положении экрана без каких-либо результатов, я прихожу к вам, если вы можете предоставить его, потому что он кажется нормальной кнопкой с нет интеллекта, чтобы поплавать в этот угол по умолчанию.

Предполагается, что я должен заставить его плавать, установив пользовательское правило css? Материал-UI docs не упоминает о свойствах плавающего Material-UI FloatingActionButton documentation.

Answer 1

Действительно, нет свойства для этого в компоненте FloatingActionButton на данный момент.

В ожидании этого:

1) Решение с использованием встроенных стилей:

В верхней части компоненты, добавьте:

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; 
}; 

... и поставить на ваш Реагировать компонент:

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

Answer 2

Если вы хотите, чтобы манипулировать CSS в материальном-интерфейсе, его лучше использовать withStyle выделки функции. примерно:

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);