Search code examples
cssreactjsstyled-components

Styled-components - set grid template based on props

I'm trying to define a grid template based on props value, but i don't know how to return the values:

What i am trying to achieve:

export const Container = styled.div`
  display: grid;
  grid-template-areas:
    'header'
    'main';
`

My code:

export const Container = styled.div`
      display: grid;
      grid-template-areas: ${props => props.isToggled ? ['header', 'main'] : ''];
   `

I am returning an array with the strings, but it does not work this way, how should i do?

Solution

  • Use a string or a string literal for multiline:

    export const Container = styled.div`
      display: grid;
      grid-template-areas: ${props => props.isToggled ? 
      `'header header sidebar'
       'main main sidebar'
       'main main sidebar'`
      : 
      ''};
   `