我想在 props 中传递 grid-template-areas 的值

Question

我正在使用 react 和 styled-components。
我想根据props中传入的值来改变grid-template-areas的样式。
我正在使用样式组件，但网格模板区域样式未正确应用。
在开发者工具中查看时，它看起来像图像，这意味着没有应用样式。

import React from 'react';
import styled from 'styled-components';

type Props = {
  page: 'home' | 'user' | 'group';
};

export const Container: React.FC<Props> = ({page, children}) => {
  const dataList = {
    home: {
      gridTemplateAreas: 'header body',
      gridTemplateRows: '60px calc(100vh - 50px)',
    },
   user: {
      gridTemplateAreas: 'header header', 'body body',
      gridTemplateRows: '60px calc(100vh - 100px)',
    },
    group: {
      gridTemplateAreas: 'header body',
      gridTemplateRows: '60px calc(100vh - 30px)',
    },
  };
  const data = dataList[page];
  return <Box {...data}>{children}</Box>;
};

type StyledProps = {
  gridTemplateAreas: any;
  gridTemplateRows: string;
  padding: number;
};

const Box = styled.div<StyledProps>`
  display: grid;
  grid-template-areas: ${(props) => props.gridTemplateAreas};
  grid-template-rows: ${(props) => props.gridTemplateRows};
`;

Answer 1

grid-template-areas' 值应该用引号括起来，试试这个：

  const dataList = {
    home: {
      gridTemplateAreas: `"header body"`,
      gridTemplateRows: '60px calc(100vh - 50px)',
    },
   user: {
      gridTemplateAreas: `"header header" "body body"`,
      gridTemplateRows: '60px calc(100vh - 100px)',
    },
    group: {
      gridTemplateAreas: `"header body"`,
      gridTemplateRows: '60px calc(100vh - 30px)',
    },
  };