सामग्री-ui रिस्पॉज फ़्लोटिंगएक्शनबटन फ्लोट

Question

एक उदाहरण खोजने की कोशिश करने के बाद फ़्लोटिंगएक्शनबटन बिना किसी परिणाम के अपने मानक नीचे-दाएं स्क्रीन स्थिति पर तैरता है, यदि आप एक प्रदान कर सकते हैं तो मैं आपके पास एक सामान्य बटन प्रतीत होता हूं डिफ़ॉल्ट रूप से उस कोने में तैरने के लिए कोई इंटेलिजेंस नहीं है।

क्या यह माना जाता है कि मुझे कस्टम सीएसएस नियम स्थापित करके इसे फ़्लोट करना है? सामग्री-यूआई दस्तावेज़ों में Material-UI FloatingActionButton documentation फ़्लोटिंग के बारे में किसी भी संपत्ति का उल्लेख नहीं है।

Answer 1

वास्तव में, इस समय फ्लोटिंगएक्शन बटन में घटक के लिए कोई संपत्ति नहीं है।

इसके लिए प्रतीक्षा कर रहा है:

1) इनलाइन शैलियों का उपयोग कर एक समाधान:

अपने घटक के शीर्ष पर, जोड़ें:

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

... और अपने विधि प्रस्तुत करना में :

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

या

2) सीएसएस फ़ाइल का उपयोग कर एक समाधान

अपने सीएसएस फ़ाइल में जोड़ें (पूर्व: 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

आप सामग्री-ui में सीएसएस हेरफेर करने के लिए चाहते हैं, तो इसके बेहतर कार्य currying 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);