How to write React Styled Component property that requires two lines?

Question

So I'm trying to write my grid-template-areas property with styled components, but vscode keeps saying I'm writing it wrong. How would I convert this into styled components?

@media screen and (max-width: 768px) {
  .row {
    grid-template-areas:
      'col1 '
      'col2 ';
  }

  .row.start {
    grid-template-areas:
      'col1 col1'
      'col2 col2';
  }
}

I've tried to do this and it isn't working

@media screen and (max-width: 768px) {
  grid-template-areas: ${({ imgStart }) =>
  imgStart ? 
  "'col1'"
  "'col2'"
  : 
  "'col1 col1'"
  "'col2 col2'"
  };
}

I also tried to add \n and '\n\' and {'\n'} and it still showing an error

Answer 1

You need to enclose the entire statement in a single pair of double quotation marks:

@media screen and (max-width: 768px) {
  grid-template-areas: ${({ imgStart }) =>
  imgStart ? 
  "'col1' 'col2'"
  : 
  "'col1 col1' 'col2 col2'"
  };
}

Alternatively, if you would like to preserve the two-line formatting, you can use string concatenation:

@media screen and (max-width: 768px) {
  grid-template-areas: ${({ imgStart }) =>
  imgStart ? 
  "'col1'"+
  "'col2'"
  : 
  "'col1 col1'"+
  "'col2 col2'"
  };
}