如何从父组件为子组件内指定React/MUI组件设置styled-components样式？

你说的需求完全可行，之前导入修改没生效大概率是因为styled-components的作用域限制，或者没选中Menu实际控制宽度的内部组件（Material UI的Menu宽度是由MuiPaper-root元素决定的）。下面是几种直接有效的实现方法：

方法1：通过props传递定制好的Menu组件 #

父组件里用styled-components包装Material UI的Menu，然后把这个定制组件传给子组件Demo，Demo里直接使用传入的组件即可：

App.js 代码 #

import { styled } from 'styled-components';
import Demo from './Demo';
import Menu from '@mui/material/Menu';

// 注意要选中内部的MuiPaper-root来设置宽度
const StyledMenu = styled(Menu)`
  & .MuiPaper-root {
    width: 300px;
  }
`;

function App() {
  return <Demo customMenu={StyledMenu} />;
}

Demo.js 代码 #

import { useState } from 'react';
import MenuItem from '@mui/material/MenuItem';

// 接收父组件传入的customMenu，重命名为Menu使用
function Demo({ customMenu: Menu }) {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <button onClick={handleClick}>打开菜单</button>
      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
        <MenuItem onClick={handleClose}>选项1</MenuItem>
        <MenuItem onClick={handleClose}>选项2</MenuItem>
      </Menu>
    </div>
  );
}

export default Demo;

方法2：用Material UI ThemeProvider局部定制 #

如果想通过主题方式控制，父组件可以用ThemeProvider包裹Demo，定制Menu的样式，这样不会影响全局其他Menu：

App.js 代码 #

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Demo from './Demo';

// 创建自定义主题，覆盖Menu的paper样式
const demoMenuTheme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        paper: {
          width: 300,
        },
      },
    },
  },
});

function App() {
  return (
    {/* 只给Demo组件应用这个主题 */}
    <ThemeProvider theme={demoMenuTheme}>
      <Demo />
    </ThemeProvider>
  );
}

Demo组件不需要做任何修改，直接用原始的Menu即可，样式会通过主题自动生效。

方法3：全局样式（不推荐，仅作补充） #

如果不想改组件结构，可以给Demo里的Menu加自定义className，然后在父组件里通过全局样式设置：

Demo.js 代码 #

// 给Menu添加自定义className
<Menu className="custom-300-width-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>

App的styles.js 代码 #

import { createGlobalStyle } from 'styled-components';

export const DemoMenuStyles = createGlobalStyle`
  .custom-300-width-menu .MuiPaper-root {
    width: 300px;
  }
`;

App.js 代码 #

import { DemoMenuStyles } from './styles';
import Demo from './Demo';

function App() {
  return (
    <>
      <DemoMenuStyles />
      <Demo />
    </>
  );
}

为什么之前修改没生效？ #

大概率是两个原因：

1. styled-components的样式是局部作用域，你在父组件定义的样式没有作用到子组件里的原始Menu上；
2. 直接给Menu设置width不会生效，因为Material UI的Menu宽度实际由内部的Paper组件（类名MuiPaper-root）控制，必须选中这个元素才能改宽度。

内容的提问来源于stack exchange，提问作者Happy1234