I have encountered an issue with an imported component that has multiple nested divs which I am unable to modify.
Deep within these divs, I need to apply a bottom margin.
While using Chrome DevTools, I managed to add the desired margin to one of the divs and achieve the desired result.
However, I'm struggling to replicate this in my scss file. How can I accomplish this?
const MyComponent = props => {
return (
<div>
{/* This component is not in my control. I can't modify this component*/}
<ImportedComponent/>
</div>
);
};
Although I can see the CSS changes in Chrome DevTools as shown below, I am unable to implement them in my scss file.
<div class="my-own-class">
<!-- This is all coming from ImportedComponent, each div has some css class -->
<div>
<div>
<div class="aCssClass anotherClass"> <!-- i want to be able to add my margin here, able to do it but only via Chrome dev tools-->
<div>
<div>
Some data
</div>
</div>
</div>
</div>
</div>
</div>
I have tried various styles in my scss file, but none seem to make any difference.
.my-own-class {
margin-bottom : 1em;
}
.my-own-class > div:nth-child(3) {
margin-bottom : 22px;
}
.my-own-class body .aCssClass {
margin-bottom: 22px;
}
body .aCssClass {
margin-bottom: 22px;
}
body > .aCssClass {
margin-bottom: 22px;
}
.my-own-class .aCssClass {
margin-bottom: 22px;
}
.my-own-class > .aCssClass {
margin-bottom: 22px;
}
Screenshot
I made the necessary changes by adding margin-bottom 10px under body .sc_marginRight_0 on the right panel, as highlighted in the image linked below.