TL; DR: EDIT2 तक स्क्रॉल करें

MUIv4 ने मेरे नेस्टेड थीम से मेरे लिए निम्नलिखित वर्ग बनाए:

<label class="MuiFormLabel-root-121 
MuiInputLabel-root-113 
MuiInputLabel-formControl-115 
MuiInputLabel-animated-118 
MuiInputLabel-shrink-117 
MuiInputLabel-marginDense-116 
MuiInputLabel-outlined-120 
Mui-disabled 
Mui-disabled 
MuiFormLabel-filled-123" 

data-shrink="true">Email</label>

अब मुझे निम्नलिखित वर्ग को बदलने में दिलचस्पी है:

.MuiInputLabel-outlined-120.MuiInputLabel-shrink-117 {
    transform: translate(14px, -6px) scale(0.75);
}

इसलिए मेरे पास एक थीमिंग फ़ाइल है [डुप्लिकेट का केवल यह दिखाने का उद्देश्य है कि मैंने क्या प्रयास किया]:

createTheme({
    overrides: {
      MuiInputLabel: {
        outlined: {
          color: red[500],
          backgroundColor:purple[600],
          MuiInputLabel: {
            shrink: {
              transform: "translate(0px, -15px) scale(0.75) !important",
            }
          },
          "&.MuiInputLabel-shrink": {
            transform: "translate(0px, -15px) scale(0.75) !important",
          },
          "&[class*='MuiInputLabel-shrink']":{
            transform: "translate(0px, -15px) scale(0.75) !important",
          },
        }
      },
    },
  })

लेकिन कोई भी नियम काम नहीं करता है? मैं क्या गलत कर रहा हूं? मैं createTheme से जेनरेट किए गए क्लासनाम कैसे देख सकता हूं?

संपादित करें - मैं एक सीएसएस आवरण के साथ वांछित प्रभाव प्राप्त करने में सक्षम था:

const MUIWrapper = styled.div`
[class*="MuiInputLabel-outlined"][class*="MuiInputLabel-shrink"] {
    transform: translate(0px, -15px) scale(0.75);
}
  }
`

लेकिन असल में मैं इसे इस तरह लागू नहीं करना चाहता था

संपादित करें 2: जैसा कि @hotcakedev द्वारा बताया गया है, इसके साथ संभव है:

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
            transform: translate(14px, -6px) scale(0.75);
          }
        },
      }
    },
  })

लेकिन मुझे अभी भी आश्चर्य है कि इसे इस तरह लिखने की कोई संभावना क्यों नहीं है:

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          MuiInputLabel: { 
            shrink: {
              transform: translate(14px, -6px) scale(0.75);
            }
          }
        },
      }
    },
  })

यह वही होगा जो मैं लिखना चाहूंगा, क्योंकि यह स्पष्ट और आसानी से पठनीय है!

1
user2853437 21 नवम्बर 2021, 19:48
आप एमयूआई के किस संस्करण का उपयोग करते हैं, 4 या 5?
 – 
hotcakedev
21 नवम्बर 2021, 20:10
संकेत के लिए धन्यवाद। मैंने संस्करण की जानकारी के साथ-साथ एक संपादित भी जोड़ा है
 – 
user2853437
21 नवम्बर 2021, 20:28

1 उत्तर

सबसे बढ़िया उत्तर

सुनिश्चित नहीं हैं कि आपने अपनी थीम को इस तरह क्यों बनाया (डुप्लिकेट MuiInputLabel)।

कृपया सुनिश्चित करें कि थीम संरचना में कोई डुप्लिकेट ओवरराइडिंग घटक नहीं हैं।

  createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          ...
        },
        shrink: {
          ...
        }
      }
    },
  })

यदि आप किसी विशिष्ट घटक के अंदर उसी घटक को स्टाइल करना चाहते हैं, तो आप नेस्टेड थीम संरचना में & और अन्य सीएसएस ट्रिक्स का उपयोग कर सकते हैं।

  createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
            transform: translate(14px, -6px) scale(0.75);
          }
        },
      }
    },
  })

अन्यथा, आप अपनी खुद की वैश्विक शैलियाँ बना सकते हैं।

// GlobalStyles.js
import { createStyles, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => createStyles({
  '@global': {
    '*': {
      boxSizing: 'border-box',
      margin: 0,
      padding: 0,
    },
    body: {
      height: '100%',
      width: '100%'
    },
    '#root': {
      height: '100%',
      width: '100%'
    }
    ...
    '.some-class': {
      '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
        transform: translate(14px, -6px) scale(0.75);
      }
    }
  }
}));

const GlobalStyles = () => {
  useStyles();

  return null;
};

export default GlobalStyles;

// App.js

...
import GlobalStyles from './GlobalStyles.js';

const App = () => {
  return (
    ...
    <Router>
      <GlobalStyles />
      ...
    </Router>
    ...
  )
};

1
hotcakedev 21 नवम्बर 2021, 22:28
मैंने अपने द्वारा आजमाए गए सभी नियमों को दिखाने के लिए वहां डुप्लीकेट ओवरराइड लगाए हैं! क्या इसके बजाय कोई JSS संस्करण नहीं है: '.MuiInputLabel-shrink*' या '&.MuiInputLabel-shrink*'। मैं कक्षा संयोजनों के लिए भी <MuiElement>: {<sub>: {}}-नोटेशन के साथ रहना चाहता हूं।
 – 
user2853437
21 नवम्बर 2021, 22:15
1
कृपया मेरे अपडेट जांचें।
 – 
hotcakedev
21 नवम्बर 2021, 22:28
आपके प्रयासों के लिए धन्यवाद! मैंने अपना जवाब दोबारा संपादित किया और चूंकि मुझे लगता है कि कोई बेहतर तरीका नहीं है, मैं आपका जवाब लूंगा। धन्यवाद!
 – 
user2853437
22 नवम्बर 2021, 02:40