मुझे नीचे के रूप में storybook.scss होने के कारण .sb-show-main को ओवरराइड करने का एक तरीका मिला।

//.storybook/storybook.scss

.sb-show-main {
  background-color: green;
  padding: 16px;
  margin: 20px;
}

फिर इसे केवल .storybook/preview.js में आयात करें

import "./storybook.scss";

मैं जिस समस्या का सामना कर रहा हूं और समझ नहीं पा रहा हूं कि, background-color: green का प्रभाव है, लेकिन padding और margin को नजरअंदाज किया जा रहा है। आश्चर्य है कि क्या कोई कभी sb-show-main को संशोधित कर रहा है?

पैडिंग के लिए डिफ़ॉल्ट मान 1rem है, मैं इसके बजाय इसे 20px में बदलना चाहूंगा।

enter image description here

0
Isaac 15 सितंबर 2020, 06:40

1 उत्तर

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

आप जिन शैलियों को अधिलेखित करने का प्रयास कर रहे हैं, वे शायद css !महत्वपूर्ण निर्देश का उपयोग कर रही हैं, या किसी तत्व के उनके लक्ष्यीकरण में अधिक विशिष्ट हो सकती हैं। मैं हमेशा पहले विशिष्ट होने की कोशिश करता हूं, लेकिन अन्यथा मैं अंतिम उपाय के रूप में !important का उपयोग करूंगा।

.container header ul li p {
  color: blue;
}

// OVERWRITE STYLES 
p { /* this wont work, because it's not as specific as the original rule */
  color: yellow;
}

.container header h1 ul li p { /* try this first */
  color: purple;
}

p { /* otherwise use !important as last resort */
  color: orange !important;
}
<div class="container">
  <header>
    <h1>Logo</h1>
    <ul>
      <li><p>One</p></li>
      <li><p>Two</p></li>
      <li><p>Three</p></li>
    </ul>
  </header>
</div
0
Bjorn.B 15 सितंबर 2020, 06:56