Question

我有以下scss：

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  &:hover {
    padding: 3em;
    .d-none {
      display: inline-block !important;
    }
  }

  &:hover .d-none {
    display: inline-block !important;
  }
}

悬停时，我得到了padding:3em，但是嵌套规则和内联子规则都无效，即.d-none类没有被覆盖。

使用CSS模块编写规则的正确方法是什么？

我正在使用sass和modules启用（REACT_APP_SASS_MODULES=true）的CRA和custom-react-scripts来测试CSS模块。

或者我应该改用styled components吗？试图找出适合响应应用程序的应用程序。

Answer 1

您可以尝试使用此代码来解决您的问题

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 3em;
  background: red;
  &:hover {
    &.d-none {
      background: black;
      color: #fff;
      padding: 20px;
    }
  }
}

.d-none {
  background: green;
  color: #fff;
  padding: 20px;
}


<div class="skillBox">
  Parrent
  <div class="d-none">Childred</div>
</div>

例如:: https://codepen.io/anon/pen/yqQNJX CodePen

Answer 2

您的CSS没有错。请参见下面的演示。

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  .d-none{
    display: none;
  }

  &:hover {
    padding: 3em;
    .d-none {
      display: inline-block;
    }
  }
}

https://codepen.io/paulcredmond/pen/djQoow

Answer 3

如果具有skillbox和d-none类的元素是下面的同级元素，则为该css

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  &:hover {
    padding: 3em;
  }
}

.dnone {
  display: none;
}

.skillBox:hover ~ .dnone {
  display: inline-block;
}

http://jsbin.com/hixamotuku/edit?html,css,output

Answer 4

因此，我意识到CSS模块为.d-none创建了一个自定义的类名，并应用了该类名。

因此，我完全更改了类名，使其成为覆盖.d-none的全新类。

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  &:hover {
    .dNone {
      display: inline-block !important;
    }
  }
}

并通过将它们添加为数组然后将它们连接在一起进行应用：

<i className={['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick={this.onDelete} />

CSS模块`：hover .child`不起作用

4 个答案: