Malzemeyi etkinleştirin FloatingActionButton süzgeci

Question

FloatingActionButton'ın standart sağ alt ekran konumunda hiçbir sonuç almadan yüzdüğü bir örnek bulmaya çalıştıktan sonra, size normal bir düğme olduğu için bir tane sağlayabiliyorsanız size gelirim. varsayılan olarak bu köşeye gitmek için hiçbir zeka yok.

Özel bir css kuralı ayarlayarak float yapmam gerekiyor mu? Materyal-UI belgeleri, yüzen Material-UI FloatingActionButton documentation ile ilgili herhangi bir özellikten bahsetmiyor.

Answer 1

Gerçekten, şimdilik FloatingActionButton bileşeninde bunun için bir özellik yok.

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

... ve işlemek yönteminde:

1) satır içi stilleri kullanan bir çözüm: senin bileşenin üst kısmında

eklemek

bunun için bekliyorum :

( ) styles.css) sizin index.html başvurulan: Bir çözüm ex (CSS dosyasında Ekle

CSS dosyasını kullanarak

2)

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

... ve koymak senin Eğer malzeme ui CSS işlemek istiyorsanız işlevini currying withStyle kullanmak onun daha iyi,

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

Answer 2

: bileşenini tepki. bunu beğendi:

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