Extending a styled component

I have a question about the intended inheritance pattern for StyledComponents.

Say I have:

class MenuItem extends React.Component {
  render() { return <foo className={this.props.className} />; }
}
const StyledMenuItem = styled(MenuItem)`
  height: 10px;
`

I’d like to extend StyledMenuItem with a subclass, let’s say Settings

class Settings extends StyledMenuItem {
  render() { return <bar className={this.props.className} />; }
}
const StyledSettings = styled(Settings)`
  width: 10px;
`

But this pattern doesn’t seem to be functional, the render method of MenuItem is getting called rather than Settings. What’s the best practice for extending React methods as well as styling? Right now it seems like I need to do it in two steps, extending MenuItem to Settings, and then applying the MenuItem and Settings styles.

[k15a]

Inheritance isn’t a good pattern in React. Read more about that here: https://facebook.github.io/react/docs/composition-vs-inheritance.html

Personally I would rewrite your solution like this:

const MenuItemWrapper = styled.div`
  height: 10px;
`;

class MenuItem extends React.Component {
    render() {
        return (
            <MenuItemWrapper>
                {this.props.children}
            </MenuItemWrapper>
        );
    }
}

const SettingsWrapper = styled.div`
  width: 500px;
`;

class Settings extends React.Component {
    render() {
        return (
            <SettingsWrapper>
                {this.props.settings.map(setting => (
                    <MenuItem>
                        {setting}
                    </MenuItem>
                ))}
            </SettingsWrapper>
        );
    }
}

Hopefully that’s what you want to accomplish 😉

[bthallion]

That’s helpful feedback, thanks for the advice. Time to do a little bit of refactoring