@formasters777

Почему в styled-components нельзя использовать такую обёртку?

Почему не работает данный пример в styled-components?
z-index в этом случае не помогает,
Стили компонента Component1 перекрывают все стили Component2,
и в devTools не создаётся даже div с Component2.
В данном случае стили как обёртку нельзя использовать для других компонентов?
import React from 'react';
import ReactDOM from 'react-dom/client';
import Component1  from './Component1';
import Component2  from './Component2';
root.render(
  <React.StrictMode>
      <GlobalStyle />
      <Component1>
           <Component2 />
      </Component1>
  </React.StrictMode>
);

import React from 'react';
import styled from 'styled-components'
const StyledComponent1 = styled.div`
display: flex;
position: relative;
z-index: 1;
text-align: center;
margin: 0 auto;
border: solid 2px gray;
border-radius: 20px;
width: 400px;
height: 400px;
margin-top: 40px;
background-color: violet;
`;
function Component1() {
  return (
<StyledComponent1>
      <p>Wrapper</p>
</StyledComponent1>
  );
}
export default Component1;

import React from 'react';
import styled from 'styled-components';
const StyledComponent2 = styled.div`
background-color: green;
color: red;
`;
function Component2() {
  return ( 
<StyledComponent2>
      <p>ghfhfhfhfghfhfghf</p>
      <p>ghfhfhfhfghfhfghf</p>
</StyledComponent2>
  );
}
export default Component2;
  • Вопрос задан
  • 77 просмотров
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Рискну предположить, что Table - это и есть Component1.

Ты передаешь в Component1 проп children, но в самом компоненте этот проп, к сожалению, не используется.

надобно:
function Component1({children}) {
  return (
<StyledComponent1>
      <p>Wrapper</p>
      {children}
</StyledComponent1>
  );
}


куда именно воткнуть children внутри Component1 - это уж сам решай, но куда-то придётся.

в Component2 и Component3 тоже следует сделать так. Ну и читать доку, пока голова не отвалится.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы