如何在react和next-js中创建带有样式化组件的全局样式，使用css文件和样式化组件组合更好吗

Question

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

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

Answer 1

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

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文件的配合好。