/ / स्टाइलिंग एक सामग्री- ui TextField घटक के अंडरलाइनफोकस सामान्य पर सामान्य सीएसएस - सीएसएस, अभिकर्मक, सामग्री-यूआई, इनलाइन-शैली

सामान्य सीएसएस पर एक सामग्री-ui TextField घटक की अंडरलाइन फोकस स्टाइल स्टाइलिंग - सीएसएस, रिएक्शन, सामग्री-यूई, इनलाइन-शैलियों

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

उदाहरण के लिए मेरा मतलब है TextField घटक "underlineFocusStyle

आप इसे पसंद करेंगे:

<TextField hintText="Hint Text" style={{width: "80%"}}
underlineFocusStyle={{backgroundColor: "#0000FF", height: "2px"}}
/>

अब, सामान्य सीएसएस में कैसे लिखें। TextField घटक की शैली ही स्टाइल के शीर्ष पर घटक के उस underlineFocusStyle की स्टाइल?

जैसे, TextField की चौड़ाई के लिए शैली निश्चित रूप से होगी:

चौड़ाई: 100%

लेकिन कैसे अंडरलाइनफोकस स्टाइल को स्टाइल किया जाएगा? कुछ इस तरह:

width: 100&
.underline-focus-style: background-color: #000FF

क्योंकि मैं घटक के लिए एक शैली देना चाहता हूं, जिसे सीएसएस में लिखा जाना है। धन्यवाद।

उत्तर:

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

आप सीएसएस शैलियों को अंडरलाइनफिशल और किसी भी सामग्री-यूआई घटक पर भी लागू कर सकते हैं। एक कास्ट स्टाइल ऑब्जेक्ट घोषित करें और नीचे की तरह अपना सीएसएस जोड़ें

const style = {
"background-color": "#fff", color:"#333"
}

और फिर इस स्टाइल ऑब्जेक्ट को नीचे की तरह रेखांकित करें

<TextField underlineFocusStyle={style} />

उम्मीद है कि यह आपके प्रश्न का उत्तर देगा।