样式化的组件：替代样式无法在服务器端渲染中正常使用

Question

似乎覆盖样式不能始终如一地工作。我有两个样式化的组件：

const StreamContentContainer = styled.div`
  display: flex;
  vertical-align: middle;
  flex-direction: column;
  flex: 0 100%;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
  flex-flow: column wrap;
`;

// new Component based on StreamContentContainer 
with additional styles and override stlye

const FullStreamContentContainer = styled(StreamContentContainer)`
  height: 56.11vw;
  overflow: hidden;
  padding: 0;
`;

知道如果我使用FullStreamContentContainer，应该没有填充。在运行良好的CSR上，元素会正确显示在标记中。 但是，如果以SSR开头请求元素，则StreamContentContainer的填充会再次覆盖FullStreamContentContainer。 节点是在SSR还是CSR上生成都没有关系，它在标记中的显示方式相同： <div class="sc-4y67w2-1 fodYop sc-4y67w2-0 WzHos">...</div>。 但是，如果我使用DevTools检查元素，则可以看到在SSR上首先显示类WzHos，然后显示类fodYop：

与CSR上呈现的规则相比，规则以相反的方式出现-如预期：

有人知道导致这种奇怪行为的原因是什么，以及如何避免这种行为？

Answer 1

问题已解决：通过使用

增加了FullStreamContentContainer样式的特异性

const FullStreamContentContainer = styled(StreamContentContainer)`
  &&& {
  height: 56.11vw;
  overflow: hidden;
  padding: 0;
  }
`;

与to the SC docs相关，重复的类将特异性提高到足以覆盖源顺序。