/ / सामग्री-यूआई बटन के फ़ॉन्ट आकार बदल रहा है, और बटन पैमाने? - जावास्क्रिप्ट, सीएसएस, रिएक्टज, सामग्री-यूआई, जेएक्स

सामग्री-UI बटनों का फ़ॉन्ट आकार बदलना, और बटन स्केल करना? - जावास्क्रिप्ट, सीएसएस, प्रतिक्रिया, सामग्री-ui, जेएसएक्स

मुझे लगता है कि सामग्री-यूआई (प्रतिक्रिया के लिए) RaisedButton पर फ़ॉन्ट आकार बदलने और इसके साथ बटन को ठीक से स्केल करने में समस्या हो रही है।

<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>

सीएसएस:

.buttonText {
font-size: 63px;
}

पाठ का आकार बदलता है लेकिन बटन अपने आप में "t स्केल" नहीं होता है। क्या किसी को इसका उचित समाधान पता है? मैं पाठ आकार के साथ बटन करना चाहता हूं।

उत्तर:

उत्तर № 1 के लिए 6

समस्या सामग्री- UI सभी की इनलाइन हैउनके घटकों के लिए शैलियाँ, इसलिए यदि आप उन्हें सीएसएस चयनकर्ताओं के साथ ओवरराइड करने की कोशिश करते हैं तो यह आमतौर पर बहुत सही काम नहीं करता है। इसके बजाय, जो भी इनलाइन शैली आप ओवरराइड करने का प्रयास करते हैं, उसका उपयोग नहीं करना चाहते हैं। style घटक पर सीधे संपत्ति। यह कुछ इस तरह दिखेगा:

<RaisedButton style={{ fontSize: "63px" }} label="Log in Here" />

और अगर यह अभी भी "बिल्कुल सही नहीं दिखता है, तो बस उस घटक पर सभी उत्पन्न इनलाइन शैलियों का निरीक्षण करें और देखें कि आप क्या बदलना चाहते हैं" style वस्तु भी।

http://www.material-ui.com/#/components/raised-button


जवाब के लिए 10 № 2

उपयोग labelSize तत्व के लिए इनलाइन शैली को ओवरराइड करने के लिए प्रोप

http://www.material-ui.com/#/components/raised-button

<RaisedButton
label="Button"
labelStyle={{ fontSize: "63px"}}
/>

जवाब के लिए 4 № 3
<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>

जवाब के लिए 2 № 4

यह भी एक रिक्ति के लिए एक शैली के रूप में लाइनहाइट के साथ जोड़ा जाना चाहिए:

  < RaisedButton style = {{lineHeight: "100px"}}
label = "lineHeight in style" / >

यहाँ सभी विभिन्न समाधानों के साथ एक बेला है: https://jsfiddle.net/botbotdotdot/kfph5cc2/

चियर्स


जवाब के लिए 0 № 5

फ़ॉन्ट-आकार इकाई का उपयोग करें Percent (%) या em। जैसे font-size:12%