create-react-app 中的条件 CSS

Question

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

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

决定是否动态加载特定 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）。

---

如 cmets 中所述，此解决方案没有提供切换主题运行时的简单方法。此解决方案侧重于将主题拆分为单独的包。

如果您已经将主题拆分为单独的 CSS 文件，并且想要交换主题运行时，您可能需要查看使用 ReactHelmet (illustrated by @Alexander Ladonin's answer below) 的解决方案

Answer 2

您可以改用require('file.css') 语法。这将允许您将其放在条件中。

例如

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/> 渲染时重写它。

Answer 4

我发现在生产中有效的一个简单解决方案是使用 vercel 的 styled-jsx。首先，安装styled-jsx：

npm install --save styled-jsx

或者如果你使用 Yarn：

yarn add styled-jsx

现在从您的 css 文件创建字符串，例如：

const style1 = `
div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
`
const style2 = `
div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
`

然后在您的 React 组件中，您可以执行以下操作：

const MyComponent = () => {
  return (
    <div className='my-component'>
      <style jsx>
        {
          conditionA ? style1: style2
        }
      </style>
    </div>
  )
}

只需将<style jsx>{your_css_string}</style> 添加到您希望添加样式的组件中，然后您就可以实现条件，只需使用不同的字符串来导入不同的css 样式。

Answer 5

其他解决方案对我不起作用。经过一天的搜索，我得到了以下解决方案。在我的问题中，我有两个用于 RTL 或 LTR 的 CSS 文件，例如 app.rtl.css 或 app.ltr.css

像这样创建一个功能组件Style：

import React, { useState } from "react";

export default function Style(props) {
  const [stylePath, setStylePath] = useState(props.path);

  return (
    <div>
      <link rel="stylesheet" type="text/css" href={stylePath} />
    </div>
  );
}

然后你就可以调用它了，比如App.js:

function App() {
...
return (    
  <Style path={`/css/app.${direction}.css`} />
)}

direction 参数包含rtl 或ltr 并确定应加载哪个文件。