How to properly overwrite existing className with emotionJS

Question

I'm trying to use emotion to overwrite the styling of an existing React component from a 3rd party library.

I try my best to simplified the problem in this codesandbox

The ExternalLib simulates a 3rd party component I'm using which I should not change the code.

As you can see it accepts a "prefix" props for css namespace and uses className in static string.(the original one has it as sass variable also)

I first try to get the base className hash with css function, then I try to compose those in emotion way of composition, and I get the expected visual result.

const baseStyle = css`
  background-color: blue;
  width: 200px;
  height: 200px;
`;

const getItemStyle = ({ disabled }) => {
  return `
    height: 50px;
    margin: 4px;
    background-color: ${disabled ? "gray" : "yellow"};
  `;
};

const getTextStyle = ({ color }) => {
  return `
    color: ${color}
  `;
};

const StyledExternalLib = styled(ExternalLib)`
  .${baseStyle}-track {
    ${getItemStyle};
  }
  .${baseStyle}-text {
    ${getTextStyle};
  }
`;

however inspecting the style tags, I got many duplicated styles, what am I doing wrong?

you can see there are twice the yellow background

Answer 1

Here what i found, use css prop to the parent tag css={{ "& .class__youwant--overwrite": { margin: 80 } }}

Worked in my case