仅为一个React组件加载外部CSS文件

Question

我想将外部 CSS 应用于带有链接标签的 React 组件。但是，当我将该组件包含在另一个项目中时，CSS 也会应用到父项目上，这是正常的。

我怎样才能避免这种情况？我希望将“父 css”应用到组件上，但由于该组件是延迟加载的，因此 css 不会对其执行操作。

Answer 1

你可以尝试使用这个：

import React from 'react'

let cssLoaded = false;

export default class MyComponent extends React.Component {
    render() {
        if (cssLoaded === false) {
            cssLoaded = true;
            import('./MyComponentStyle.css');
        }

        // other stuff
    }
}

在你的css文件中： @import url('example.com/styles.css'); 来源：React：仅在渲染组件时加载组件的CSS