styled components targeting nested elements with Template strings-CodePudding

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

CodePudding user response：

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;
  }
`