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

Question

我正在使用 React 和样式组件。
我想根据props传入的值改变grid-template-areas的样式
我正在使用 styled-components，但是 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)',
    },
  };

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

I want to pass the value of grid-template-areas in props

typescript

reactjs

styled-components