迹忆客 专注技术分享

要在 React 应用程序中应用全局 CSS 样式，请将 CSS 写入扩展名为 .css 的文件中，并将其导入 index.js 文件中。

全局 CSS 应该在 index.js 中导入，以确保它被加载到你的 React 应用程序的所有页面上。

下面是一个 index.css 文件的示例，它声明了 2 个全局可用的类。

.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

下面是我们如何在 index.js 文件中导入 index.css 文件。

// 👇️ import css
import './index.css';

import {createRoot} from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <App />
);

上面的示例假定我们的 index.css 文件与 index.js 文件位于同一目录中。

在 React 中导入全局 CSS 文件时，最佳做法是将 CSS 文件导入到 index.js 文件中。

index.js 文件是 React 应用程序的入口点，因此它始终会运行。

另一方面，如果我们将 CSS 文件导入到组件中，则一旦我们的组件卸载，CSS 样式可能会被删除。

我们可以在任何文件中应用全局样式。

下面是一个使用这两个类的 App 组件示例。

const App = () => {
  return (
    <div>
      <div className="bg-salmon text-white">jiyik.com</div>
    </div>
  );
};

export default App;

使用 CSS 模块在 React 应用程序中应用全局 CSS 样式

如果你使用 CSS 模块来设置你的 React 应用程序的样式，你可以通过将当前选择器传递给 :global 来切换到全局范围。

:global(.bg-salmon) {
  background-color: salmon;
}

如果选择器切换到全局模式，它将不会被 CSS 模块修改并且在全局范围内可用。