Компоненты в стиле: стили переопределения не работают правильно при рендеринге на стороне сервера - PullRequest
Новая
       83

Компоненты в стиле: стили переопределения не работают правильно при рендеринге на стороне сервера

0 голосов
/ 22 октября 2018

Кажется, что переопределение стилей не работает согласованно.У меня есть два стилизованных компонента: 

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:

Styles on SSR

По сравнению с правилами, представленными в CSR, правила происходят наоборот - как и ожидалось: Styles on CSR

Кто-нибудь знает, что вызывает это странное поведение и как его избежать?

1 Ответ

0 голосов
/ 31 октября 2018

Устранена проблема: Увеличена специфичность стилей FullStreamContentContainer с помощью 

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

Относительно к документам SC , повторяющийся класс понижает специфичность, достаточно высокую для переопределения исходного порядка.

...