我开始在我的下一个js应用程序中使用Styled Components,并想知道如何或是否使用全局样式的样式化组件。
w6lpcovy1#
要创建全局样式,我们可以使用createGlobalStyle函数。对于next.js项目,您可以在_app.js或_app.tsx文件中创建全局样式,这取决于您是否使用 typescript 。
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预处理器文件类型。
GlobalStyles
globalStyle.js
.css
.scss
import '@/styles/global.scss'
这对于样式化组件也能很好地工作。尽管使用createGlobalStyle有一点好处。你可以使用所有的SCSS特性,而不必在你的项目中添加SCSS依赖项。还有一点缺点是ide的自动完成特性对样式化组件的工作不如对.css和.scss文件的工作好。
1条答案
按热度按时间w6lpcovy1#
要创建全局样式,我们可以使用
createGlobalStyle
函数。对于next.js
项目,您可以在_app.js
或_app.tsx
文件中创建全局样式,这取决于您是否使用 typescript 。当然,如果你有更多的全局样式,你可以从其他文件导出
GlobalStyles
,比如globalStyle.js
。但是,没有什么可以阻止您将CSS或SCSS用于全局样式。您可以像往常一样导入
.css
或.scss
或任何其他受支持的CSS预处理器文件类型。这对于样式化组件也能很好地工作。尽管使用
createGlobalStyle
有一点好处。你可以使用所有的SCSS特性,而不必在你的项目中添加SCSS依赖项。还有一点缺点是ide的自动完成特性对样式化组件的工作不如对.css
和.scss
文件的工作好。