如何在react和next js中使用样式组件创建全局样式，结合使用css文件和样式组件是否更好？

Question

我开始在我的 Next.js 应用程序中使用样式化组件。使用样式化组件探索全局样式的最佳实践。问题的第一部分是如何使用样式组件创建全局样式。

第二个也是更重要的部分是，结合使用 CSS 文件和样式组件是否是好的做法，还是反做法？

Answer 1

要创建全局样式，我们可以使用createGlobalStyle函数。对于next.js项目，您可以在_app.js或_app.tsx文件中执行此操作，具体取决于您是否使用打字稿。

import type { AppProps } from "next/app";
import { createGlobalStyle } from "styled-components";

import Header from "@/components/Header";

const GlobalStyles = createGlobalStyle`
html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}
`;

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <GlobalStyles />
      <Header></Header>
      <Component {...pageProps} />
    </>
  );
}

当然，如果您有更多全局样式，您可以GlobalStyles从其他文件导出，例如globalStyle.js.

但是没有什么可以阻止您使用 CSS 或 SCSS 作为全局样式。您始终可以像平常一样导入.css或.scss或任何其他受支持的 CSS 预处理器文件类型。

import '@/styles/global.scss'

这也可以与您的样式组件完美配合。尽管使用createGlobalStyle. 您可以使用所有 SCSS 功能，而无需在项目中添加 SCSS 依赖项。还有一个小缺点是，IDE 的自动完成功能对于样式组件的处理效果不如对于.css文件的处理效果好.scss。