Use Props for child element style

July 27, 2023

In React project I have a parent and a child component. I want to pass the props down and use those for styling in the child component.

Parent

<StyledToolbar>
   <Logo sx={{display: "block", width: 130}}  />
   ...
</StyledToolbar>

Logo.jsx


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

The logo is displayed but it is not styled correctly. Rendered HTML looks like this:
<img src="/assets/logo.svg" alt="My Logo" style="width: 30px; height: 30px;">

>Solution :

In React you pass the style object via the style prop. So your logic with the sx doesn’t work.

Here is the correct code:

Parent Component

<StyledToolbar>
   <Logo style={{display: "block", width: 130}}  />
   ...
</StyledToolbar>

Child Component

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