child css is being override by the parent

I'm using Styled-Component in my React project. I noted that my Child component CSS is being overridden by its parent.

This is the Parent component and its Styled-Component Wrapper:

import styled from "styled-components";
import Child from "./Child";

const Parent = () => {
  return (
    <ParentWrapper>
      <div className="nice-box" />
      <Child />
    </ParentWrapper>
  );
};

const ParentWrapper = styled.div`
  .nice-box {
    border: 3px solid black;
    height: 50px;
    width: 50px;
  }
`;

export default Parent;

And this is the Child component:

    import styled from "styled-components";

const Child = () => {
  return (
    <ChildWrapper>
      <div className="nice-box" />
    </ChildWrapper>
  );
};

const ChildWrapper = styled.div`
  .nice-box {
    border: 3px solid green;
    height: 100px;
    width: 100px;
  }
`;

export default Child;

And this is the result: result