Target a nested div coming from an external component - html

Question

I am using an imported component which I can't change.
This component has a lot of nested divs.
Somewhere deep in these divs, I need to add a bottom margin to it.
Via Chrome DevTools, I am able to add the margin in one of the divs and achieve the
margin I want. But unable to get it to work when I try to add my css into my scss file.
How can I do this?
const MyComponent = props => {
return (
<div>
{/* This component is not in my control. I can't modify this component*/}
<ImportedComponent/>
</div>
);
};
When I see it in Chrome DevTools, the CSS is something like this.
If I were to add a margin style near the aCssClass or within the block of aCssClass via Chrome,
I get the margin I need. But as said, able to achieve in Chrome DevTools, but not via 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>
These are the styles I tried which makes no 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
At the highlighted portion, I added margin-bottom 10px under body .sc_marginRight_0 on the right panel which works.

Answer 1

i think it's just a specificity problem, try adding !important and it will work just fine.
.my-own-class .aCssClass {
margin-bottom: 22px !important;
}