使用MUI styled样式化外部库React自定义组件失效问题排查

核心问题 #

MUI的styled工具靠给目标组件注入className属性来应用样式，但你用的外部组件ComponentA既没接收也没把这个className传递给内部的TextField，导致样式挂不上。另外你使用StyledComponent时的props传递写法也有误。

修复步骤 #

1. 修改ComponentA的Props与逻辑 #

调整外部模块里的ComponentA，添加className属性并传递给内部TextField：

type Props = {
  someProps: any;
  className?: string; // 新增可选className属性
};

export function ComponentA(props: Props) {
  const [value, setValue] = React.useState("");
  const { someProps, className } = props; // 解构出className

  return (
    <TextField
      name="search-bar"
      value={value}
      label="Search"
      className={className} // 将className传递给内部TextField
    />
  );
}

2. 修正StyledComponent的使用方式 #

你当前的props传递写法错误，无需包裹在props对象里，直接传属性即可：

<StyledComponent someProps={1} />

3. 验证效果 #

现在styled生成的StyledComponent会把样式对应的className传递给ComponentA，再由ComponentA传递给内部的TextField，样式就能正常生效了。

替代方案（无法修改外部组件时） #

如果没法改动外部模块的ComponentA，可以用MUI的Box组件包裹它，给Box添加样式来控制外层容器：

import { Box } from '@mui/material';

// 使用时
<Box sx={{ width: 'auto', height: '5%', margin: '10px 15px 20px' }}>
  <ComponentA someProps={1} />
</Box>

这种方式只能控制外层容器样式，无法直接修改内部TextField的样式。

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