我有一个问题：React样式组件＆amp;（parent Selector）

Question

目标：我想为容器的儿童组件（标题，登录名，页脚）提供弹性样式。

给定以下代码（以CREATE-REACT-APP -TYPESCRIPT开始）：

src/app.tsx

import React from 'react';
import logo from './logo.svg';
import styled from 'styled-components';
import Footer from './component/Footer/Footer';
import Login from './component/Login/Login';
import Header from './component/Header/Header';

function App() {
  return (
    <>
      <Container>
        <Header />
        <Login />
        <Footer />
      </Container>
    </>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #7f8c8d;

  &:nth-child(1) {
    flex: 1 1 15%;
  }
  &:nth-child(2) {
    flex: 1 1 75%;
  }
  &:nth-child(3) {
    flex: 1 1 5%;
  }
`;

export default App;

src/component/footer/footer.tsx

import React from 'react';
import { FC } from 'react';
import styled from 'styled-components';

interface FooterProps {}

const Footer: FC<FooterProps> = () => {
  return <Container>Footer</Container>;
};

const Container = styled.footer`
  display: flex;
  justify-content: center;
  background-color: #2980b9;
`;
export default Footer;

src/component/component/header/header/header.tsx

import React from 'react';
import { FC } from 'react';
import styled from 'styled-components';

interface HeaderProps {}

const Header: FC<HeaderProps> = () => {
  return <Container>Header</Container>;
};

const Container = styled.header`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2980b9;
`;

export default Header;

src/components/login/login/login.tsx

import React from 'react';
import { FC } from 'react';
import styled from 'styled-components';

interface LoginProps {}

const Login: FC<LoginProps> = () => {
  return <Container>Login</Container>;
};

const Container = styled.main`
  display: flex;
  justify-content: center;
  background-color: #ecf0f1;
`;

export default Login;

应用程序渲染结果

问题部分是App.tsx（styled.div）的容器，

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #7f8c8d;

  &:nth-child(1) {
    flex: 1 1 15%;
  }
  &:nth-child(2) {
    flex: 1 1 75%;
  }
  &:nth-child(3) {
    flex: 1 1 5%;
  }
`;

我尝试了几个代码，例如：（起作用）

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #7f8c8d;

  & :nth-child(1) {
    flex: 1 1 15%;
  }
  & :nth-child(2) {
    flex: 1 1 75%;
  }
  & :nth-child(3) {
    flex: 1 1 5%;
  }
`;

和

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #7f8c8d;

  & > :nth-child(1) {
    flex: 1 1 15%;
  }
  & > :nth-child(2) {
    flex: 1 1 75%;
  }
  & > :nth-child(3) {
    flex: 1 1 5%;
  }
`;

代码结果

我试图尝试的代码变化效果很好，但我不明白为什么它会这样起作用。

为什么这不起作用？

  &:nth-child(1) {
    flex: 1 1 15%;
  }
  &:nth-child(2) {
    flex: 1 1 75%;
  }
  &:nth-child(3) {
    flex: 1 1 5%;
  }