Material UI styled() 父组件设置子组件样式不生效问题

根本原因是你写的自定义Child组件没有透传className属性。
MUI的styled()包装组件的逻辑非常直白：运行时生成带目标样式的CSS类，把这个类名通过className prop传给被包装的组件。如果你的组件压根不接这个prop，也不把它绑到实际渲染的DOM节点上，那生成的CSS类根本找不到挂载的地方，样式自然不可能生效——这也解释了为什么你能看到console.log正常打印：样式生成逻辑确实执行了，只是生成的类名被你写的组件直接丢了，没用到。

你两个测试场景踩的是同一个坑：

• 第一个带内部红色样式的场景：Child内部自己渲染了styled的Div，但外层传进来的className完全没被接收，更没传给Div，所以外层的黑色样式根本挂不上去，只有内部的红色正常显示。
• 第二个去掉内部样式的场景：Child直接返回原生<div>，还是没接className，类名直接被丢弃，黑色样式当然出不来。

另外你还有个不规范的写法：把StyledChild的定义写在了App组件的函数体里，每次App重渲染都会重新生成一个全新的styled组件，会导致不必要的重挂载、性能损耗，极端情况下也会触发样式异常，虽然这不是这次问题的核心诱因，但也要改。

核心要求只有一个：所有要被styled包装的自定义组件，必须把接收的className绑定到内部的根渲染节点上。

基础场景修正（无内部样式的Child） #

import { styled } from "@mui/material";

// 1. 组件接收className prop，绑定到根div
function Child({ className }) {
  return <div className={className}>hello world</div>;
}

// 2. styled组件定义在组件作用域外，不要写在App内部
const StyledChild = styled(Child)(() => ({
  backgroundColor: "black"
}));

function App() {
  return <StyledChild />;
}

export default App;

带内部样式的Child修正 #

如果组件内部已经有styled定义的样式，直接把外部传入的className挂到内部的styled组件上即可，MUI的styled组件会自动合并类名，外层传入的样式优先级更高，会自动覆盖同权重的内部样式：

import { styled } from "@mui/material";

function Child({ className }) {
  const Div = styled("div")(() => ({
    backgroundColor: "red"
  }));
  // 把外部className传给内部的Div
  return <Div className={className}>hello world</Div>;
}

const StyledChild = styled(Child)(() => ({
  backgroundColor: "black"
}));

function App() {
  return <StyledChild />;
}

这个写法下最终渲染的背景色为黑色，符合覆盖预期。

• 所有自定义业务组件如果需要支持外部自定义样式，都默认把className（还有style属性）透传到根节点，这是React生态的通用约定，不管是MUI styled、emotion、原生CSS Modules都依赖这个约定工作。
• 禁止在React组件渲染函数内部调用styled()生成新组件，动态样式需求优先通过给styled组件传自定义props、或者使用sx属性实现。

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