What happens if I render createGlobalStyle component several times inside some component

user_4804896 0
Viewed 980

Will it insert global style several times, or will it clear it after every unmount?

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/>
    </>
  );
}
styled-components
1 Answers

It will clear before every render. The styling is only applied as long as the component is inside the DOM. You can try using the following component for testing:

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>
      </>
    );
  }
}
user_115233830
Related