为啥我的样式在codesandbox中没有生效？

Posted 2023-02-19

【中文标题】为啥我的样式在codesandbox中没有生效？

【英文标题】：Why are my styles not taking effect in codesandbox?为什么我的样式在codesandbox中没有生效？

【发布时间】：2018-12-19 20:24:48

【问题描述】：

如果你看看这个小小的 CodeSandbox 项目：https://codesandbox.io/s/0oj4z7ko00

注意index.html中有以下两个sn-ps：

<style type="text/css">
  #container 
    background: yellow;
  
</style>

和

<div id="container"></div>

这个容器是 React 渲染应用程序其余部分的地方（有效），但它的背景不是黄色的！为什么不呢？

---

此外，如果您查看 components/Presentational.js，您会发现以下 sn-p：

<div className=data % 2 === 0 ? "even" : "odd">

在 index.html 中，这些类名的一些样式：

<style type="text/css">
  .even  color: red; 
  .odd  color: green; 
</style>

请注意，类名已根据 data 属性的值正确分配给元素，但样式未生效，文本仍为黑色。

在这两种情况下，在检查器中都找不到样式，所以我真的不认为它们被覆盖了。但到底发生了什么？为什么我的样式在 CodeSandbox 中没有生效？

【问题讨论】：

猜猜这是某种密码箱的东西，也许只允许更新正文？您只需添加一个index.css 文件并将其导入您的index.js。

是的，谢谢

@Shawn CSB 链接似乎有效。 “是的，有效”，你的意思是你能用 sn42 的答案解决问题吗？

@SungKim 是的，问题解决了

【参考方案1】：

在完成任何更改后保存该文件，例如保存 HTML、CSS、.jss 文件。

点击文件选项卡（左上角）->保存