React overriding child element styles - reactjs

Question

I have the following structure
<button>
<OtherComponent />
</button>
OtherComponent just gives a < span /> with an icon, with its own styles.
I want to pass a style to button to override OtherComponent's styles, eg. set the margin to 0. I've tried (doesn't work)
<button style={{ 'span': { margin: 0 }}}>
<OtherComponent />
</button>

Answer 1

Inline style only affects the current element that you are applying to
If you want to style a child element then you should select it from a CSS file.
So in your parent component you would do:
import React from "react";
import { OtherComponent } from "./components/OtherComponent";
import "./styles.css";
export default function App() {
return (
<div className="App">
<OtherComponent />
</div>
);
}
And then in styles.css file:
.App span {
margin: 0;
}
Complete Example

Answer 2

A simple way is to add div/Button in backend and override style like style={{ marginLeft: "100px" }} with double curle braces.
Parent Component
import "./styles.css";
import OtherComponent from "./OtherComponent";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button style={{ marginLeft: "100px" }}>
<OtherComponent />
</button>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Child Component
import React from "react";
import "./buttonStyle.css";
class OtherComponent extends React.Component {
render() {
return <button className="button">Style Button</button>;
}
}
export default OtherComponent;
CodeSandBox Live Demo