How to style nested third-party components with styled-jsx in nextjs

Question

I want to style multiple third-party components in a NextJS component with styled-jsx without using the :global() or <style jsx global> attribute to make sure the scope is always only for this component.

Using the resolve function provided by styled-jsx seems to be somewhat going in the right direction, but as soon as I have third-party components nested within third-party components I have to write a resolve function for every case which makes the css kind of bloated.

export default function MyComponent(props) {

  const { className, styles } = resolve`
    .content-element {
      position: static;
      background-color: ${contentElementBGColor(
        props.content.cfgBackgroundColor,
        props.settings
      )};
    }
  `;

  return(
    <>
      <ContentElementWrapper {...props} className={className}>
        <Row className="inner-row">
          // ... more nested components
        </Row>
      </ContentElementWrapper>
      {styles}
      <style jsx>
        {`
          :global(.inner-row) {
            justify-content: ${props.content.cfgAlignment};
          }

        // more global selectors for the nested components
        `}
      </style>
    </>
  );
}

For the <ContentElementWrapper> I already used the resolve function to create and scope its style. But do I have to do the same thing for styling the Bootstrap <Row> and all its nested components? Or is using :global() already the best possible option? From my understanding you should have as little as possible globale CSS.