Question

我正在尝试基于props值定义一个网格模板，但是我不知道如何返回值：

我要实现的目标：

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

我的代码：

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

我正在返回带有字符串的数组，但是这种方式无法正常工作，我应该怎么办？

Answer 1

为多行使用字符串或字符串文字：

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

样式化组件-根据道具设置网格模板

1 个答案: