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

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

Applying global CSS styles in a React app

要在 React 应用程序中应用全局 CSS 样式，请将您的 css 写入一个带有
.css扩展名的文件中，然后将其导入您的index.js文件中。全局 CSS 应该被导入index.js以确保它被加载到你的 React 应用程序的所有页面上。

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

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

.text-white {
  color: white;
}

这是我们将文件导入index.css文件的方式index.js。

// 👇️ 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文件相同的目录中。

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

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

如果您使用CSS 模块
来设置您的 React 应用程序的样式，您可以通过将当前选择器传递给:global.

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

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