Add extra styles to a child component

[commscheck]

Say I have a self-contained component that knows how to style itself:

// MyComponent.tsx

interface MyComponentProps {
  color: string
}

const useStyles = makeUseStyles({
  container: (props: MyComponentProps) => ({
    backgroundColor: props.color,
    // ...
  })
})

const MyComponent = (props: MyComponentProps) => {
  const classes = useStyles(props)
  return (<div className={classes.container}>
    {/* ... */}
  </div>)
}

But when I use that component, I want to add some extra styles, e.g. for positioning in a CSS grid:

// App.tsx

const useStyles = makeUseStyles({
  app: {
    display: 'grid',
    gridTemplateColumns: '[alpha] 1fr [beta] 2fr [charlie]',
    gridTemplateRows: '[delta] 1fr [echo] auto [foxtrot]',
  }
})

const App = () => {
  const classes = useStyles()
  return <div className={classes.app}>
    <MyComponent color="#d3d3d3" />    // <-- needs gridColumnStart, rowColumnStart, etc.
  </div>
}

How can I add the additional styles? The child component shouldn't need to know how it's positioned within its parent, so I don't want to add them to MyComponentProps.

I considered creating a GridItem HOC to wrap items that go in the grid, but that would require nesting each item in an extra div. Is there a cleaner approach? Cheers!