如果在某个组件中多次呈现createGlobalStyle组件，会发生什么情况

// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* 其他全局样式 */
`;

export default GlobalStyles;

// App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';
import OtherComponents from './OtherComponents';

function App() {
  return (
    <>
      <GlobalStyles />
      <OtherComponents />
    </>
  );
}

export default App;

// ConditionalStyles.js
import { createGlobalStyle } from 'styled-components';

const ConditionalStyles = ({ isActive }) => {
  if (!isActive) return null;

  return createGlobalStyle`
    .conditional-style {
      color: red;
    }
  `;
};

export default ConditionalStyles;

// SomeComponent.js
import React, { useState } from 'react';
import ConditionalStyles from './ConditionalStyles';

function SomeComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <>
      <button onClick={() => setIsActive(!isActive)}>Toggle Style</button>
      <ConditionalStyles isActive={isActive} />
      <div className="conditional-style">This text will change color.</div>
    </>
  );
}

export default SomeComponent;