React子组件通过Props传递样式失效问题排查

问题原因 #

你直接将MUI的sx属性赋值给原生<img>的style属性，存在两个核心问题：

1. MUI的sx是经过主题解析的样式语法，和原生DOM的style属性规则不兼容——比如你写的width: 130没有单位，MUI的sx会自动补全单位，但原生style必须明确指定单位（如px）才能生效。
2. 渲染后出现的width: 30px; height: 30px应该是全局样式或img默认样式，你的自定义样式优先级不足被覆盖了。

解决方案 #

方案一：用MUI Box组件包裹img（推荐） #

借助MUI的Box组件解析sx属性，它会自动处理样式规则并保证优先级：

// Logo.jsx
import { Box } from '@mui/material';

const Logo = (props) => {
    return (
        <Box sx={props.sx}>
            <img src="/assets/logo.svg" alt="My Logo" />
        </Box>
    )
}
export default Logo

方案二：直接传递原生style属性 #

放弃sx，改用原生style props，注意给样式值加单位：

// 父组件调用
<StyledToolbar>
   <Logo style={{display: "block", width: "130px"}}  />
   ...
</StyledToolbar>

// Logo.jsx
const Logo = (props) => {
    return (
        <img 
            src="/assets/logo.svg"
            alt="My Logo"
            style={props.style}
        />
    )
}
export default Logo

方案三：用MUI styled API创建样式化img #

通过styled工具让img支持sx属性解析：

// Logo.jsx
import { styled } from '@mui/material/styles';

const StyledImg = styled('img')(({ sx }) => sx);

const Logo = (props) => {
    return (
        <StyledImg 
            src="/assets/logo.svg"
            alt="My Logo"
            sx={props.sx}
        />
    )
}
export default Logo

应急方案：提升样式优先级 #

如果是全局样式覆盖导致的问题，可临时在sx中添加!important（不推荐长期使用）：

<Logo sx={{display: "block", width: "130px !important"}}  />

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