Search code examples
javascriptreactjsstyled-components

styled components targeting nested elements with Template strings


I would like to target specific elements inside my styled component that would work with object notation.

styled(Grid)`
  background: #2c353d;
  border-radius: 14px;
  margin-bottom: 25px;
  display: flex;

  '& > div': {
    padding: 20px;
  }
`

How am I able to target the div inside the Grid whilst using Template strings?

So css selector would be: div > div


Solution

  • A simple div inside of the template string is enough to target all div elements inside of the Grid component.

    styled(Grid)`
      background: #2c353d;
      border-radius: 14px;
      margin-bottom: 25px;
      display: flex;
    
      div {
        padding: 20px;
      }
    `