如何在solid-js中制作<App/>组件的白色背景色？
如何在solid-js中制作<App/>组件的白色背景色？
提问于 2022-08-05 18:47:51
我创建了一个solid-js应用程序，它是我在尾风中设计的。我在应用程序的index.css文件中定义了一个灰色，它必须用作应用程序的各种屏幕的背景色。但是，我希望基本的<App/>组件有一个与其他组件不同的白色背景颜色。因此，我编写了一个App.css文件，并将其导入到App.jsx文件中，并在其中编写了以下代码：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
body::-webkit-scrollbar {
@apply w-3;
}
body::-webkit-scrollbar-thumb {
@apply bg-white rounded-full;
}
}但是，当我加载页面时，我看到<App/>组件的背景色仍然是灰色的，所以我在App.jsx文件中编写了以下代码：
function App() {
return (
<div className="bg-white">
<Suspense fallback={<WhelpsLoader />}>
...
</div>
);
}但这并没有将任何内容加载到组件的背景色中，所以我对App.css文件进行了如下修改：
.App {
background-color: #ffff;
}但是它没有加载任何东西，我也不明白为什么，因为在我看来，为<App/>组件编写的css代码应该优先于index.css文件中包含的css代码。
我还编辑了我的App.jsx文件如下：
import "./App.css";
...
document.querySelector('.App').style.backgroundColor = "#fff";
function App() {
useNetworkStatus();
return (
<div class="App">
<Suspense fallback={<WhelpsLoader />}>
<AppRouter />
<Snackbars />
</Suspense>
</div>
);
}
export default App;回答 2
Stack Overflow用户
发布于 2022-08-05 18:56:13
在您的.jsx文件中使用这个。
document.querySelector('.App').style.backgroundColor = "#fff";
// or for entire <body>
document.body.style.backgroundColor = "#e1e1e1";<div class="App"> </div>
Stack Overflow用户
发布于 2022-09-27 18:22:21
不需要命令式API，可以在元素上使用样式属性：
import { render } from "solid-js/web";
function App() {
return <div style={{ ["background-color"]: "orange" }}>My Application</div>;
}
render(App, document.getElementById("app")!);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73254154
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号