CSS模块`：hover .child`不工作答案

【问题标题】：CSS module `:hover .child` not workingCSS模块`：hover .child`不工作
【发布时间】：2018-08-08 14:49:41
【问题描述】：

我有以下 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 和 custom-react-scripts 并打开 sass 和 modules 的 CSS 模块 (REACT_APP_SASS_MODULES=true)。

或者我应该改用styled components？正在尝试找出适合 React 应用程序的应用程序。

【问题讨论】：

我认为你的 CSS 看起来是正确的。一个忠告 - 如果你需要自定义 create-react-app 以愉快地使用它，请不要使用 create-react-app。一旦你离开滑雪道，你就会失去很多好处。

标签： reactjs sass create-react-app css-modules

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案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} />

【讨论】：