如何让自定义组件样式继承默认组件样式？以rc-tree-select为例

因为rc-tree-select的下拉容器不属于MUI的Paper组件范畴，修改MuiPaper.defaultProps.sx.boxShadow只会对MUI原生Paper组件生效，无法自动同步到第三方组件的下拉框，你可以用以下几种方法手动实现同步：

方法1：从MUI Theme中直接取值传入dropdownStyle #

在使用rc-tree-select的组件里，通过useTheme钩子获取自定义后的主题，将对应的阴影值直接传递给dropdownStyle：

import { useTheme } from '@mui/material/styles';
import TreeSelect from 'rc-tree-select';

function YourComponent() {
  const theme = useTheme();
  // MuiPaper默认elevation为1，对应theme.shadows[1]，若自定义了elevation则用对应索引
  const dropdownStyle = { boxShadow: theme.shadows[1] };

  return (
    <TreeSelect
      dropdownStyle={dropdownStyle}
      // 其他组件props...
    />
  );
}

方法2：用CSS类名全局覆盖 #

给rc-tree-select的下拉框添加自定义类，通过MUI样式方案或全局CSS设置阴影：

用MUI styled组件实现： #

import styled from '@mui/material/styles/styled';
import TreeSelect from 'rc-tree-select';

const StyledTreeSelect = styled(TreeSelect)`
  .rc-tree-select-dropdown {
    box-shadow: ${({ theme }) => theme.shadows[1]} !important;
  }
`;

// 使用时直接替换原组件
function YourComponent() {
  return (
    <StyledTreeSelect
      // 其他组件props...
    />
  );
}

或在createTheme中全局配置： #

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  styleOverrides: {
    MuiCssBaseline: {
      styleOverrides: {
        '.rc-tree-select-dropdown': {
          boxShadow: 'var(--mui-paper-shadow)'
        }
      }
    }
  },
  // 自定义阴影数组（若有）
  shadows: [...yourCustomShadows]
});

// 给MuiPaper绑定CSS变量
theme.components.MuiPaper.defaultProps = {
  sx: {
    '--mui-paper-shadow': theme.shadows[1]
  }
};

方法3：全局统一用CSS变量 #

如果希望所有第三方组件下拉框都同步MuiPaper的阴影效果，可以在MUI主题中定义CSS变量，再在rc-tree-select的dropdownStyle中引用：

// 第一步：在createTheme中定义CSS变量
const theme = createTheme({
  components: {
    MuiPaper: {
      defaultProps: {
        sx: {
          '--paper-box-shadow': theme.shadows[1]
        }
      }
    }
  }
});

// 第二步：在rc-tree-select中使用变量
<TreeSelect
  dropdownStyle={{ boxShadow: 'var(--paper-box-shadow)' }}
  // 其他组件props...
/>

后续只要修改主题中的shadows或MuiPaper的elevation值，rc-tree-select的下拉框阴影会自动同步更新。

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