CSS 模块 ':hover .child' 不起作用

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 模块编写规则的正确方法是什么？

我正在尝试使用 CRA 的 CSS 模块和打开sass和modules的自定义反应脚本(REACT_APP_SASS_MODULES=true(。

或者也许我应该改用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/yqQNJXCodePen

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} />