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

Question

[formasters777]

Почему не работает данный пример в 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;

Comments

[WbICHA]

А что за Component1 мы гадать должны?

Answer 1

[Alexandroppolus]

Рискну предположить, что Table - это и есть Component1.

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

надобно:

function Component1({children}) {
  return (
<StyledComponent1>
      <p>Wrapper</p>
      {children}
</StyledComponent1>
  );
}

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

в Component2 и Component3 тоже следует сделать так. Ну и читать доку, пока голова не отвалится.

Comments

[formasters777]

Понял свою ошибку надо было в одном файле это делать, все компоненты там объединять,
но почему если у меня есть два компонента, то такая запись показывает мне только первый компонент, а второго как бы не существует?

[Alexandroppolus]

formasters777,

надо было в одном файле это делать, все компоненты там объединять

это вообще здесь не при чем. И не надо всё в один файл.

попробуй ещё раз осмыслить работу с children.

[formasters777]

помню children рассматривал на последних страницах распечатки по React,
там был пример, про общий компонент Dialog и его можно было наполнять пропсами, и менять диалог на приветствующий диалог и т.п.
но я что-то запутался, сейчас остановился на таком варианте, он работает, стили подключаются, после, как доделаю буду с пропсами разбираться, может сокращу кол-во компонентов.