Почему стилевые компоненты сохраняют старые классы?

Question

Я недавно пытался переключиться с Меньше на styled-components. Похоже, что новый класс добавляется в мою голову документа каждый раз, когда стилизованный компонент перерисовывается.

Так, например, с этим кодом:

const Loop = () => {
  const [opacity, setOpacity] = useState(100);
  useEffect(() => {
    const id = setInterval(() => setOpacity(opacity => opacity - 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <Test opacity={opacity} />;
};

const Test = styled.div`
  height: 40px;
  width: 40px;
  background: black;
  opacity: ${props => props.opacity / 100};
`;

render(<Loop />, document.getElementById("app"));

css содержание растет каждую секунду:

В моем реальном проекте у меня есть большие CSS классы, которые необходимо часто обновлять, и веб-приложение нуждается оставаться открытым в течение длительного времени в браузере, так что это может нарушить условия сделки. Я что-то не так делаю или это нормально? Я ничего не мог найти в до c.

Answer 1

Это dynamici c class , сгенерированный из styled-components, и идентичная строка css должна генерировать тот же класс . (Но при повторном открытии приложения будут сгенерированы разные классы)

То есть, когда компонент будет перерисован заново, классы должны быть повторно использованы для него, и дополнительные классы не будут созданы.

В этом примере будет создано и повторно использовано 10 классов.