如何将外部URL中的样式表应用于特定的react组件

import React, { useEffect } from 'react';

const ExternalStylesheetLoader = ({ url, children }) => {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);

    return () => {
      document.head.removeChild(link);
    };
  }, [url]);

  return <>{children}</>;
};

export default ExternalStylesheetLoader;

import React from 'react';
import ExternalStylesheetLoader from './ExternalStylesheetLoader';

const MyComponent = () => {
  return (
    <ExternalStylesheetLoader url="https://example.com/styles.css">
      <div className="styled-component">
        This component uses an external stylesheet.
      </div>
    </ExternalStylesheetLoader>
  );
};

export default MyComponent;

npm install styled-components

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

const GlobalStyle = createGlobalStyle`
  @import url('https://example.com/styles.css');
`;

const StyledDiv = styled.div`
  /* Additional component-specific styles */
  color: blue;
`;

const MyComponent = () => {
  return (
    <>
      <GlobalStyle />
      <StyledDiv className="styled-component">
        This component uses an external stylesheet and additional inline styles.
      </StyledDiv>
    </>
  );
};

export default MyComponent;

npm install react-helmet

import React from 'react';
import { Helmet } from 'react-helmet';

const MyComponent = () => {
  return (
    <>
      <Helmet>
        <link rel="stylesheet" href="https://example.com/styles.css" />
      </Helmet>
      <div className="styled-component">
        This component uses an external stylesheet.
      </div>
    </>
  );
};

export default MyComponent;