问break-inside不使用material ui

EN

          {map(blocks, ({ kpi, ...block }, blockIndex) => {
            const blocType = get(block, 'type', type);
            const { getW, splitIntoChunk } = blockParams[blocType];
            const kpiRows = splitIntoChunk(kpi);
            return (
              <TestVal>
                <Grid item xs={12} key={`${key}_blocks_${blockIndex}`}>
                  <Block container>
                    {block.title ? (
                      <BlockTitle data-testid={`section_${sectionIndex}_block_${blockIndex}_title`}>
                        <Typography variant="h5">{block.title}</Typography>
                      </BlockTitle>
                    ) : null}
                    <Grid item sm={12}>
                      {map(kpiRows, (row, rowIndex) => (
                        <KPIRow key={`section_${sectionIndex}_row_${rowIndex}`} item xs={12} margin={2} style={{ marginBottom: spacings.regular_1 }}>
                          <Grid container spacing={2} alignItems="stretch" data-testid={`section_${sectionIndex}_block_${blockIndex}_row_${rowIndex}`}>
                            {map(row, (kpiData, i) => {
                              const w = getW(row.length, kpi.length);
                              return (
                                <KPIWrapper key={`${key}_row_${rowIndex}_kpi_${i}`} item xs={w}>
                                  <KPIContent><KpiBase data={kpiData} w={w} /></KPIContent>
                                </KPIWrapper>
                              );
                            })}
                          </Grid>
                        </KPIRow>
                      ))}
                    </Grid>
                  </Block>
                </Grid>
              </TestVal>
            );
          })}

export const TestVal = styled.div`
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
    background-color:red;
`;