Css 如何使用React+；材料界面

我试图在React中建立一个管理样式的通用模式——“dumb”组件有一些默认样式，它还接受

className

prop以覆盖这些单独的样式

但是，在使用MaterialUI及其

makeStyles

方法时，我无法成功实现此模式

const useStyles = makeStyles({
  child: {
    padding: 16,
  },
});

const ParentComponent = () => {
  const styles = useStyles();
  return (
    <div>
      <ChildComponent className={styles.child} />
    </div>
  );
};

const useStyles=makeStyles({
儿童：{
填充：16，
},
});
常量ParentComponent=（）=>{
常量样式=使用样式（）；
返回(
);
};

从“classnames”导入合并类；
const useStyles=makeStyles({
默认样式：{
填充：0，
},
});
常量ChildComponent=（{className}）=>{
常量样式=使用样式（）；
const mergedStyles=mergeClasses（类名，styles.defaultStyles）；
返回(
);
};

在本例中，无论

mergeClasses

在

ChildComponent

，都将始终优先于

className

样式，并且

ChildComponent

将以0

padding来呈现

如何将Material UI与此基本反应模式结合使用？
我希望您的示例代码能够以相反的顺序工作。材质ui组件可能正在使用选择器。您能在浏览器中看到应用于元素的选择器吗？类传递到
mergeClasses
的顺序与哪种样式获胜无关。唯一重要的顺序是文档中样式规则的顺序（即
中
元素的顺序）。此顺序由调用
makeStyles
的顺序控制——稍后的
makeStyles
调用将导致稍后的
元素，否则将获胜。请创建一个复制您的问题的。奇怪的是，这不是问题所在——呈现的类是“makeStyles-link-218 makeStyles-link-401”，两个同样特定的选择器。@RyanCogswell我已尝试按要求在代码沙盒中复制此问题；奇怪的是，这个问题在工作时会在这里重现（子对象的填充为0），但在重新加载沙箱时，它的填充为16px@RyanCogswell我确实理解
makeStyles
是如何以这种方式工作的，但我想知道如何使用上面的父子css模式（它是MUI的
makeStyles
范式的核心，可以做出任何反应）。
import mergeClasses from 'classnames';

const useStyles = makeStyles({
  defaultStyles: {
    padding: 0,
  },
});

const ChildComponent = ({ className }) => {
  const styles = useStyles();
  const mergedStyles = mergeClasses(className, styles.defaultStyles);
  return (
    <div className={mergedStyles} />
  );
};