子零部件中有多个零部件，是否可以将样式应用于父零部件的子零部件中的特定零部件？
应用程序/索引. jsx

import React from "react";
import { Container, StyledMenu } from "./styles";

const App = ({ className }) => {
  return (
    <Container className={className}>
      <h1>this is a demo</h1>
      <StyledMenu />
    </Container>
  );
};

export default App;

App/styles.js

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

export const Container = styled.div`
  background-color: pink;
  padding: 20px;
`;

Container.displayName = "Container";

export const StyledMenu = styled(Demo)`
  & .MuiPaper-root {
    width: 300px;
  }
`;

StyledMenu.displayName = "StyledMenu";

演示/索引. jsx

import * as React from "react";
import Button from "@mui/material/Button";
// import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { MenuDisplay } from "./styles";

export default function BasicMenu({ className }) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div className={className}>
      <Button
        id="basic-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <MenuDisplay
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </MenuDisplay>
    </div>
  );
}

Demo/styles.js

import styled from "styled-components";
import Menu from "@mui/material/Menu";

export const MenuDisplay = styled(Menu)`
  background-color: green;
`;

MenuDisplay.displayName = "MenuDisplay";

我喜欢将width: 300px应用于App/style.js中Demo/index.jsx中的Menu组件（它是一个下拉菜单）。
这可能吗？
这里是codesandbox的演示
下面是来自mui doc的Menu组件

次尝试

我在App/styles.js中导入了MenuDisplay（位于演示/styles.js中

import styled from "styled-components";
import Demo from "../Demo";
import { MenuDisplay } from "../Demo/styles";

export const Container = styled.div`
  background-color: pink;
  padding: 20px;
`;

Container.displayName = "Container";

export const StyledMenu = styled(Demo)`
  ${MenuDisplay} & {
    & .MuiPaper-root {
      width: 300px;
    }
  }
`;

StyledMenu.displayName = "StyledMenu";

这不管用