接下来如何使用样式组件中的 GlobalStyles？ [关闭]答案

【问题标题】：How do I use GlobalStyles from styled components in next? [closed]接下来如何使用样式组件中的 GlobalStyles？ [关闭]
【发布时间】：2021-10-26 14:15:30
【问题描述】：

我现在开始学习下一步。我对如何在框架中应用样式化组件的 createGlobalStyle 功能有点迷茫。

【问题讨论】：

标签： reactjs next.js styled-components

【解决方案1】：

只需转到Vercel github 并安装：

npx create-next-app --example with-styled-components with-styled-components-app
# or
yarn create next-app --example with-styled-components with-styled-components-app

【讨论】：

【解决方案2】：

您可以通过在 pages 目录中创建 _app.js 文件来使用自定义应用程序

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

function MyApp({ Component, pageProps }) {
  return <><GlobalStyle whiteColor /><Component {...pageProps} /></>
}

export default MyApp

查看https://nextjs.org/docs/advanced-features/custom-app

【讨论】：

谢谢！我使用进口。 import { GlobalStyles } from '../../GlobalStyles' function MyApp({ Component, pageProps }) { return ( <> <GlobalStyles /> <Component {...pageProps} /> </> ) } export default MyApp
有一个问题，每当我刷新页面时，它就会回到全局样式。我通过样式化组件应用的样式不会覆盖全局样式。
看看github.com/vercel/next.js/blob/canary/examples/… 可能需要您使用，因为补液
谢谢！现在正在工作。
现在 GlobalStyles 被复制了。