如何使用 tailwind 在 React JS(Next JS) 中更改所有页面的默认屏幕背景颜色 CSS

Question

我正在尝试更改 Web 应用程序所有页面的默认屏幕背景颜色。

我使用的技术：

我想将所有页面的屏幕背景颜色设为如图所示的浅灰色，而不是默认的白色。

有什么方法可以一次完成，还是我们需要手动为每个页面添加背景颜色？

Answer 1

如果您使用的是 NextJS，则可以使用自定义文件 _app.jsx（如果您使用的是 javascript）或 _app.tsx（如果您使用的是 TypeScript）来更改您所有网页的背景颜色（顺便说一句）。

您可以在文件中创建一个 div 并向 className 添加背景颜色，它将应用于 Web 应用程序中呈现的所有页面。

代码示例：

function MyApp({ Component, pageProps }) {
 return (
  <div className="bg-gray-500">
    <Component {...pageProps}/>
  </div>
 );
}

NextJS对此有更详细的解释。

Answer 2

您可以转到样式 -> globals.css 并添加以下内容

html {
  width: 100%;
  height: 100%;
  background-color: {color of your choice};
}

由此；除非您为任何组件指定单独的背景颜色，否则您的所有页面都将具有指定的背景颜色。

Answer 3

将 bg-color 添加到 div 只会将颜色添加到 div... 我认为 html { background-color: {您的颜色选择};更有可能产生预期的结果。有同样的问题。应用了您的解决方案，但它仅填充了未达到页面浏览量的 div。当然前面评论的编码是不正确的。应该是：

html {
    background-color: #yourcolor
}

How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS