如何在 Next JS 中将 css 应用于组件答案

【问题标题】：How to apply css to components in Next JS如何在 Next JS 中将 css 应用于组件
【发布时间】：2021-05-04 15:23:59
【问题描述】：

我在 next js 中有一个应用程序，它也使用脉轮 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 应用到 next js 中的所有组件？

【问题讨论】：

标签： css reactjs next.js chakra-ui

【解决方案1】：

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

【讨论】：

对作为 props 传入的 ID 的良好调用。我想我对<Component ... 感到困惑，但这一定是下一个 js 传递给 MyApp 的道具？我最终创建了一个布局容器并将<Container.. 包装在该布局容器中。在那里，我可以按照自己的意愿设置 CSS 样式