Search code examples
javascriptcssreactjswebinline-styles

React Child component has undefined props.style


I'm quite new to React. I want to create custom component that has several custom component inside it. Below is the code

const { item, to, onClick, width, style, ...otherProps } = props;
const h = width ? (width*IMAGE_RATIO)+'px' : 'auto';
const w = width ? width+'px' : 'auto';
<StackView
  style={{ width: w, ...style }}
  {...otherProps}
>
  <Container
    to={to}
    onClick={onClick}
    item={item}
    style={{ width: w, height: h }}
  />
  <ClickableText
    to={to}
    onClick={onClick}
    typography={typography.t15}
    color={color.red}
    activeColor={color.redDark}
    style={{ lineHeight: '12px' }}
  >
    {item.title}
  </ClickableText>
</StackView>

Inside the Container component and ClickableText component props.style got undefined tried to Google this problem but find nothing. Can somebody help me? thanks

EDIT:

Michael answer was spotted on. The problem is in my StackView component, I override children style while cloning them


Solution

  • I'm sure there's something wrong with the parent of Container and ClickableText component.

    Please check the parent component StackView. If you override the children style, then that's the root problem of this mess.

    Good Luck.