<分区>
css - HTML/CSS : How to avoid inheriting styles from parent class (using react-select with bootstrap)
尝试将 react-select 与 bootstrap css 结合使用时，我遇到了样式问题。
这可能是与这些库无关的一般性问题。我不是 100% 确定。
这是一个 codesandbox 演示来展示我面临的问题。 https://codesandbox.io/s/k0325onrk3
据我了解，问题是子元素 div class="Select-control" 从父类 (form-control) 继承样式.
编辑: 这里的一种选择是我自己一个一个地覆盖样式。但我觉得这很难而且不可扩展。考虑到 CSS 的级联特性，我确实注意到元素继承了样式，但这是我第一次看到一个元素从父级继承了整个 CSS 类。我在这里遗漏了什么吗？
编辑 2(答案):事实证明，问题不在于从父级继承类。奇怪的行为是由于 react-select 引入了一个新的 select 元素。基本上，bootstrap 中的 form-control 类假定其子项是文本(或没有边框等样式的东西)，因此添加了填充。但是 react-select 引入的实际子元素是另一个与 form-control 具有相似样式的元素。因此， child 表现出这种奇怪的行为。所以解决方案是覆盖 form-control 类中的样式，而不是子类中的样式(我最初假设的)。
当我用 chrome 检查该元素时，我可以看到以下内容。
如何防止 div class="Select-control" 元素从父元素的 form-control 类继承样式？
最佳答案
关于css - HTML/CSS : How to avoid inheriting styles from parent class (using react-select with bootstrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53320044/