почему стилизация компонентов не добавляется

Question

Я почесал голову за последние 2 часа, вот почему этот компонент в стиле 3-й стороны не добавляет его. Имею взгляд

import React from 'react';
import styled from 'styled-components'
const StyleDiv =styled.div`
@media(max-width:600px){
body{
background-color: red;
}
}`
const Person= (props)=>{
return <StyleDiv>
<h1 onClick={props.click}>i am {props.name} and {props.age} years old as you  know me as {props.children} </h1>
<input type="text" onChange={props.changed} />
</StyleDiv>
} 
export default Person;

Answer 1

вы не можете применять такие глобальные стили к компоненту, для применения глобальных стилей (то есть стилей к телу, html et c.) styled-components дает утилиту createGlobalStyles, ее можно использовать так:

import { createGlobalStyles } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  @media (max-width: 600px) {
    body {
      background-color: red;
    }
  }
`;

// Render GlobalStyles to the root lvvel of your app
ReactDOM.render(
  <>
    <GlobalStyles />
    <App /> 
  </>,
  document.getElementById('root');
);

Надеюсь, это поможет:)

Answer 2

Если вы поместите селекторы внутри строки шаблона без амперсанда, они будут ссылаться на дочерние элементы компонента. https://styled-components.com/docs/basics#pseudoelements -pseudoselectors-and-nesting

По сути, вы не можете выбрать тело в вашем div и, вероятно, не должны.