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

Posted 2023-02-22

【中文标题】如何在 react 和 next js 中使用 Styled 组件创建全局样式，使用 css 文件和 styled 组件的组合是不是更好？

【英文标题】：How to Create global styles with Styled components in react and next js and is it better to use combination of css files and styled component?如何在 react 和 next js 中使用 Styled 组件创建全局样式，使用 css 文件和 styled 组件的组合是否更好？

【发布时间】：2022-01-18 18:51:40

【问题描述】：

我开始在我的下一个 js 应用程序中使用 Styled Components，并且想知道如何或是否将样式化组件用于全局样式。想以 Q n A 格式分享。

【参考方案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 文件上的效果。