Question

我有默认的css文件和单独的css文件，只有在满足某些条件时才应用（默认为owerride）。

我正在使用create-react-app wit默认import 'file.css'语法。

决定是否动态加载特定css文件的最佳方法是什么？

Answer 1

require方法仅在开发中可用（因为所有CSS都是在构建时捆绑在一起的），而import方法根本不起作用（使用CRA版本3.3）。

在我们的案例中，我们有多个主题，这些主题无法捆绑在一起-因此我们使用React.lazy和React.Suspense解决了这个问题。

我们有ThemeSelector，它可以有条件地加载正确的CSS。

import React from 'react';

/**
 * The theme components only imports it's theme CSS-file. These components are lazy
 * loaded, to enable "code splitting" (in order to avoid the themes being bundled together)
 */
const Theme1 = React.lazy(() => import('./Theme1'));
const Theme2 = React.lazy(() => import('./Theme2'));

const ThemeSelector: React.FC = ({ children }) => (
  <>
    {/* Conditionally render theme, based on the current client context */}
    <React.Suspense fallback={() => null}>
      {shouldRenderTheme1 && <Theme1 />}
      {shouldRenderTheme2 && <Theme2 />}
    </React.Suspense>
    {/* Render children immediately! */}
    {children}
  </>
);

export default ThemeSelector;

Theme组件的唯一工作是导入正确的CSS文件：

import * as React from 'react';

// ? Only important line - as this component should be lazy-loaded,
//    to enable code - splitting for this CSS.
import 'theme1.css';

const Theme1: React.FC = () => <></>;

export default Theme1;

ThemeSelector应该将App组件包装在src/index.tsx中：

import React from 'react';
import ReactDOM from 'react-dom';
import ThemeSelector from 'themes/ThemeSelector';

ReactDOM.render(
  <ThemeSelector>
    <App />
  </ThemeSelector>,
  document.getElementById('root')
);

据我了解，这会迫使每个Theme分成单独的捆绑包（实际上也可以拆分CSS）。

Answer 2

您可以使用require('file.css')语法。这将允许您将其置于条件中。

e.g。

if(someCondition) {
    require('file.css');
}

Answer 3

使用React Helmet。它将链接，元标记等动态添加到文档标题中。将其添加到任何渲染方法中。

import {Component} from 'react';
import ReactHelmet from 'react-helmet';

class Example extends Component{
    render(
        <ReactHelmet link={
            [{"rel": "stylesheet", type:"text/css", "href": "/style.css"}]
        }/>);
    }
}

您可以在下一个<ReactHelmet/>渲染中重写。

create-react-app中的条件css

3 个答案: