Does styled components replace rules and/or remove classes when props change?

[mrkev]

Hello everyone! I'm trying to learn more about how styled components work. Currently, I'm trying to understand how styles that render based on props. Concretely, let's say I have something like this:

const InnerContainer = styled.div`
  background: white;
  color: blue;
  margin-right: ${(props) => props.marginRight}px;
}`;

function App() {
  const [randomNumber, setRandomNumber] = useState(0);
  return (
    <>
      <button onClick={() => setRandomNumber(Math.random() * 10)}>random margin</button>
      <InnerContainer marginRight={randomNumber}>
        Hello world
      </InnerContainer>
    <>
  );
}

and I press the random margin button a few times. I'm wondering:

1. Would this create a new class for my rendered <InnerContainer /> each time? Or would somehow edit the marginRight of the one class directly (via something like document.styleSheets[0].cssRules[0].style.marginRight = ... for example)?
2. If it creates a new class instead of editing the class, does it remove the old class? Ie, if I press the button 5 times would all 6 (the original, + 5 new ones) class definitions still exist, or just the one currently in use?