scoped सीएसएस घटक

Question

के भीतर लागू नहीं किया जा रहा मैं निम्नलिखित प्रपत्र घटक है:

<template> 
    <div> 
     <form> 
      <input placeholder="Recipe Name"> 
      <textarea placeholder="Recipe Description..." rows="10"></textarea> 
     </form> 
    </div> 
</template> 

<script> 
export default { 
    name: 'AddRecipeForm' 
} 
</script> 

<style scoped> 
form { 
    display: flex; 
    flex-direction: column; 
} 
</style> 

<style>scoped विशेषता का उपयोग करता।

जब लागू किया, सीएसएस में नहीं लोड करता मिलता है। जब scoped निकाल दिया जाता है, यह करता लागू किया मिलता है।

हालांकि मैं इसे घटक में स्थानीय रखना चाहता हूं।

scoped विशेषता मौजूद होने पर सीएसएस क्यों लागू नहीं हो रहा है?

Answer 1

ऐसा प्रतीत होता है कि यह पृष्ठ का पूर्ण-पुनः लोड करके हल किया गया था। हॉट रीलोड स्कोप्ड सीएसएस का ख्याल रखना चाहिए।

हालांकि भविष्य के दर्शकों के लिए, आमतौर पर यह पूछा जाता है कि स्कॉप्ड सीएसएस को बच्चे के घटक पर लागू नहीं किया जा रहा है। इसे deep selectors का उपयोग करके हल किया जा सकता है। (उदाहरण: .selector >>> .desired-selector {} का उपयोग करना)