子 css 被父级覆盖

Question

我在我的 React 项目中使用 Styled-Component。我注意到我的子组件 CSS 被其父组件覆盖了。

这是父组件及其样式组件包装器：

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;

这是子组件：

    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;

这是结果： result

Answer 1

我的建议是，使用类名并将样式仅应用于那些类。仅此而已