嵌套选择器的CSS未应用于div

我使用了边界元法，我的方法是显示来自块和修改器的css，而不是元素

i、 e.c-bannerblock和-warningmodifier的css正在出现，但没有出现_i图标元素

我知道修改器的颜色正在出现，因为我尝试将其更改为另一种颜色，它出现在UI上

例如： 目前：

&-警告{ 颜色：D9822B } 编辑：

&-警告{ 颜色：黑色 } 一旦更改，警告图标将在UI上以黑色显示

但是，永远不会应用_图标右侧的填充

c旗{ /*块CSS属性*/ &__图标{ 右侧填充：12px； &-警告{/*用于警告目的*/ 颜色：D9822B； } &-主要{/*用于一般信息*/ 颜色：137CBD； } &-成功{/*用于验证访问*/ 颜色：0F9960； } &-危险{/*用作急停*/ 颜色：DB3737； } } } 我真的很困惑，为什么没有应用_图标右侧的填充，但是-warning的颜色是

您所缺少的是： .c-banner。。。。。类名前的点

此外，为了使填充生效，它们必须是内部警告，因为您正在链接以形成完整的选择器，并且没有以_图标结尾的选择器

如果要影响多个材质图标，可以设置材质图标的样式：

.c-banner {

  .material-icons { padding-right: 12px; } 
  /* can also do [class*="__icon"] but may be less predictable */

  &__icon {
    /* rest of the scss */
  }
}

---

如果可以的话，您可以提供html结构吗？它是.jsx，但这里是jsx警告您有{`${props.filestatus.numberOfExtractingFiles}}}}文件，这些文件仍在上载过程中处理。因此，您下载的电子表格可能不包含最新的记录。在这种情况下，这是否意味着我一定要为4个不同的-修改器中的每一个定义12px的填充权？您可以设置材质图标类的样式，因为它将在所有图标类上可用。请参阅更新的答案。