Best way to add extra styles to a React component

[funwithtriangles]

// Here I have some sort of component without any margins
const SomeButton = function () {
  return <button>Bar</button>;
};

// I want to use the above component but just add some margins, but this doesn't work
const ButtonWithMargin = styled(SomeButton, {
  marginLeft: "1rem"
});

export default function App() {
  return (
    <div>
      <span>Foo</span>
      <ButtonWithMargin />
    </div>
  );
}

What's the best way to extend a component styles? I assumed I could use styled as above, but it seems it only works for extending other components created with styled. I see some examples using React.forwardRef but this seems very verbose for a simple task.

Perhaps there is some pattern I'm missing? I'm aware this could be achieved by doing something like:

const SomeButton = styled("button", {...})

But for the sake of argument, let's say my button is complex and needs to be a React component.

https://codesandbox.io/s/stitches-responsive-problem-forked-uimoq

[funwithtriangles]

Nevermind, I found the solution, just need to use the className prop!

import { styled } from "./stitches.config";
import "./styles.css";

const SomeButton = function ({ className }) {
  return <button className={className}>Bar</button>;
};

const ButtonWithMargin = styled(SomeButton, {
  marginLeft: "1rem"
});

export default function App() {
  return (
    <div>
      <span>Foo</span>
      <ButtonWithMargin />
    </div>
  );
}