如何将 css 应用于 Next JS 中的组件

问题描述

我在 next js 中有一个应用程序也使用 chakra UI。我正在尝试向应用添加页脚，但无法强制导航栏下的组件占据屏幕的剩余高度。

我认为我的问题是我没有正确地将 CSS 样式传递给组件。

_app.tsx

import '../styles/globals.css';

function MyApp({ Component,pageProps }) {
  return (
    <ChakraProvider theme={theme}>
    <Navbar></Navbar>
    <Component id='component-container' {...pageProps} />
  )
}

export default MyApp

styles/globals.css

#component-container {
  height: 100%
}

即使我将 #component-container 设置为 color: white 之类的东西，我也没有看到这个 CSS 应用于子组件。我认为我没有正确地将 CSS 传递给组件。

如何正确地将 CSS 应用于下一个 js 中的所有组件？

解决方法

您需要将该 ID 传递给该组件内的 HTML 元素... 现在，您只是将该 ID 作为道具传递给该组件，并且其中可能没有任何元素具有该 ID（因为我不知道您的组件的代码是什么）。 进入该组件并将该 ID 提供给您想要的元素（可能是第一个 DIV 元素）或将其作为道具传递给该元素