Что произойдет, если я создаю компонент createGlobalStyle несколько раз внутри какого-либо компонента

Question

Будет ли он вставлять глобальный стиль несколько раз или очищать его после каждого размонтирования?

import {createGlobalStyle} from 'styled-components';
const GlobalStyle = createGlobalStyle`
  #some-external-lib-element-that-is-inserted-in-the-end-of-the-body {
    color: red;
  }
`;
function MyDeepComponent({veryOftenChangingPropThatCausesRerender}) {
  return (
    <>
      <GlobalStyle/>
      <SomeExternalLibComponent/>
    </>
  );
}

Answer 1

Будет очищаться перед каждым рендером.Стилизация применяется только до тех пор, пока компонент находится внутри DOM.Вы можете попробовать использовать следующий компонент для тестирования:

import React from "react";
import {createGlobalStyle} from 'styled-components';

const GlobalStyle = createGlobalStyle`
  .global-button {
    background: red;
  }
`;

export class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      show: true,
    };
  }

  showGlobalStyling = () => {
    this.setState((prevState) => ({
      show: !prevState.show,
    }));
  }

  render() {
    return (
      <>
        {this.state.show && <GlobalStyle/>}
        <button className="global-button" onClick={this.showGlobalStyling} >
          click
          </button>
      </>
    );
  }
}