javascript 如何在react和next js中使用样式化组件创建全局样式,使用css文件和样式化组件的组合是否更好?

wbrvyc0a  于 2023-02-02  发布在  Java
关注(0)|答案(1)|浏览(165)

我开始在我的下一个js应用程序中使用Styled Components,并想知道如何或是否使用全局样式的样式化组件。

w6lpcovy

w6lpcovy1#

要创建全局样式,我们可以使用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文件的工作好。

相关问题