儿童组合器应用于生产中的父级

Question

对于我的React应用程序，我有一个具有以下结构的小示例节点：

<div className='main'>
      <input/>
</div>

对于我的CSS，我有以下内容：

.main > input {
    background-color: blue;
}

调试时，它会按预期工作，并且输入为蓝色。但是，发布该应用程序时，它不会按预期显示。相反，CSS会显示以下内容：

.main {
    background-color: blue;
}
.main > input {
    background-color: blue;
}

我没有其他具有其他CSS的CSS文件。 Webpack处理用于生产的文件的方式是否有问题？还是这是我不知道的儿童组合器的副作用？还是我应该在其他地方寻找这个问题的根本原因？

Answer 1

只需提供一个类或ID，然后通过该类更改CSS。

#id1 {
  background-color: blue;
}

<div className='main'>
  <input id='id1' />
</div>