React+styled-components通过props传递grid-template-areas样式不生效如何解决

问题根因 #

最直接的错误是user配置项的gridTemplateAreas语法非法，同时没有遵循CSS grid-template-areas的格式要求：

• JS对象中你写的gridTemplateAreas: 'header header', 'body body'属于语法错误，相当于给对象新增了一个值为undefined的'body body'键，gridTemplateAreas最终只取到了'header header'一个字符串，完全不符合网格区域的格式要求
• CSS规范中，grid-template-areas多行区域的格式要求是：每一行区域包裹在一对引号内，多行用空格分隔，整体是单个完整字符串，比如两行布局的正确值为'"header header" "body body"'

排查步骤 #

1. 打印data变量校验属性值：在给Box传参前加console.log(data)，确认每个场景下的gridTemplateAreas都是符合格式的完整字符串，无undefined、截断问题
2. 校验子元素配置：必须给网格子元素显式设置grid-area属性，和你定义的区域名对应，比如头部元素加grid-area: header，内容元素加grid-area: body
3. 校验TS类型定义：你当前StyledProps中声明的padding是必填项，但实际传参没有提供该属性，要么改为可选，要么补充默认值/传值

修复后代码示例 #

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>;
};

// 修正padding为可选属性
type StyledProps = {
  gridTemplateAreas: string;
  gridTemplateRows: string;
  padding?: number;
};

const Box = styled.div<StyledProps>`
  display: grid;
  grid-template-areas: ${(props) => props.gridTemplateAreas};
  grid-template-rows: ${(props) => props.gridTemplateRows};
  /* 补充padding默认值避免报错 */
  padding: ${props => props.padding ?? 0}px;
`;

验证示例 #

使用组件时确保子元素指定对应区域即可：

<Container page="user">
  <div style={{gridArea: 'header'}}>头部</div>
  <div style={{gridArea: 'body'}}>内容</div>
</Container>

内容的提问来源于stack exchange，提问作者yuturo