Styled-компоненты несколько псевдоэлементов - PullRequest
Новая
       37

Styled-компоненты несколько псевдоэлементов

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

Извините, я никогда не пишу здесь, поэтому не уверен, правильно ли задан этот вопрос ..

Я пытался выяснить, как делать стилизацию, как это, но не могу понять, как это работает со стилизованными компонентами..

Может ли кто-нибудь подтолкнуть меня в правильном направлении?

Как я могу сделать что-то подобное с ReactJS & Styled-components ? 

figure.container .square:before,
figure.container .square:after,
figure.container .square div:before,
figure.container .square div:after {
  /* styling */
}
figure.container .square:before,
figure.container .square:after {
  /* styling */
}
figure.container .square div:before,
figure.container .square div:after {
  /* styling */
}
figure.container .square:before,
figure.container .square div:before {
  /* styling */
}
figure.container .square:after,
figure.container .square div:after {
  /* styling */
}

Это моя jsx-структура: 

<Figure>
  <Square>
    <div></div>
  </Square>
</Figure>

1 Ответ

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

Учитывая, что вы можете опустить .container в селекторе css, все должно работать нормально 

const Square = styled.div`
  :before, 
  :after,
  div:before, 
  div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  :before,
  :after {
    width: 65%;
    height: 2px;
    background-color: white;
  }

  div:before,
  div:after {
    width: 2px;
    height: 65%;
  }

  :before,
  div:before {
    left: 0;
    top: 0;
  }

  :after,
  div:after {
    bottom: 0;
    right: 0;
  }
`;

Но на всякий случай, если вы хотите преобразование один в один 

const Figure = styled.div`
  ${Square}:before, 
  ${Square}:after,
  ${Square} div:before, 
  ${Square} div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  ${Square}:before,
  ${Square}:after {
    width: 65%;
    height: 2px;
    background-color: white;
  }

  ${Square} div:before,
  ${Square} div:after {
    width: 2px;
    height: 65%;
  }

  ${Square}:before,
  ${Square} div:before {
    left: 0;
    top: 0;
  }

  ${Square}:after,
  ${Square} div:after {
    bottom: 0;
    right: 0;
  }
`;
...