Passing props from parent styled-component to immediate child styled-component.

I am currently trying to create a grid system using styled components and I was wondering if it is possible to pass props from a parent styled to a child component. See below for example.

const Parent = styled('div')`
background: blue;
`;

const Child = styled('div')`
  margin: ${props => props.gutter ? '10px' : null ;}
`

render() {
  return(
    <div>
      <Parent gutter>
        <Child />
      </Parent>
    </div>
  )
}

Hope the example makes sense. Is it possible at all to achieve this?

Thanks in advance 👍

[mxstbr]

This is not specific to styled-components, but a more general React question. I wrote a lengthy blogpost about exactly this topic, what you’re looking for is detailed in the last section: http://mxstbr.blog/2017/02/react-children-deepdive/

You’d likely do something like this:

// 👇 Create the styled component
const ParentWrapper = styled('div')`
  background: blue;
`;

// 👇 Create an actual React component
class Parent extends React.Component {
  renderChildren = () => {
    const { children } = this.props;
    // 👇 The <Parent /> renders it's children, but passes in this.props.gutter as the gutter to each child
    return React.Children.map(children, (child) => React.cloneElement(child, {
      gutter: this.props.gutter,
    }));
  }

  render() {
    return <ParentWrapper>{this.renderChildren()}</ParentWrapper>
  }
}

const Child = styled('div')`
  margin: ${props => props.gutter ? '10px' : null ;}
`

render() {
  return(
    <div>
      {/* 👇 The parent gets the gutter here */}
      <Parent gutter>
        <Child />
      </Parent>
    </div>
  )
}

---

All of that being said, if you’re not super set on using JS, you could also just use CSS for this, which would be easier:

const Child = styled('div')`

`

const Parent = styled('div')`
  background: blue;

  // Each child within the parent will now have the correct margin based on the props passed to Parent
  ${Child} {
    margin: ${props => props.gutter ? '10px' : null};
  }
`;

render() {
  return(
    <div>
      <Parent gutter>
        <Child />
      </Parent>
    </div>
  )
}

[jony89]

This has nothing to do with styled-components. with the Parent component you can access it’s props.children and pass them w\e you like while rendering.