React & Chakra-UIで作ったページ内でヘッダーの仕切り線がはみ出ないようにしたい。

Question

ReactとChakra-UIを使ってチャートを表示するページを作っています。チャートの表示にはreact-chartjs-2(chart.jsをreactで使うためのラッパーライブラリ)を使っています。

レイアウトは、下記添付画像のようにページの上端にヘッダーを表示して、その下にチャートタイトル(testData部分)、最新値(null部分)、チャート(縦軸値、横軸値のみが表示されている部分)を表示するコンポーネントを縦に並べています。添付画像は例なのでチャート自体は空にしています。

下記添付画像のようにヘッダーとチャートタイトルの間に白線を仕切りとして入れているのですが、padding、margin領域にはみ出してしまいます。

ページの表示は、Home.tsxで全てのコンテンツを収める<Container/>を定義して<Flex/>でヘッダーを表示し、ChartCard.tsxでチャートタイトル、最新値、チャートを表示しています。

export const Home: VFC = memo(() => {

    //ここにチャートデータ取得のコード

    return (
        <>
            <Container maxW="container.xl" w="full">
                <Flex as="nav" align="center" wrap="nowrap" padding="0" position="fixed"
                      backgroundColor="black" w="100%" maxW="container.xl" borderBottom="solid">
                    <Image margin="5px" boxSize="60px" src="/logo512.png"/>
                    <Heading as="h1" marginLeft="5px" mr="auto">dataChart</Heading>
                </Flex>
                <Box h="70px"/>
                <ChartCard dataName="testData"/>
                <ChartCard dataName="testData"/>
                <ChartCard dataName="testData"/>
                <ChartCard dataName="testData"/>
                <ChartCard dataName="testData"/>
            </Container>
        </>

    )
})

export const ChartCard: VFC<Props> = (props) => {

    //ここにチャート表示のためのデータ加工のコード

    return (
        <>
            <Flex>
                <Heading as='h1' fontSize={"6rem"}>{cardTitle}</Heading>
                <Spacer/>
                <Text fontSize={"6rem"}>{`${lastNumber.value}${lastNumber.unit}`}</Text>
            </Flex>
            {
                chartCardData ?
                    (
                        <Box style={{height: "300px"}}>
                            <Line data={data} options={options}/>
                        </Box>
                    ) : null
            }
        </>
    )
}

Home.tsxの<Flex/>のborderBottom="solid"で白線を表示させているのですが、この<Flex/>のpadding、margin、widthやmaxWなどを変えてみても添付画像の青色領域内に収められません。どうすればいいでしょうか？

あと、Home.tsxでは<Box/>を入れることによってChartCard.tsxの表示領域がヘッダーに被らないようにしています。つまり、この<Box/>がないとチャートタイトルと最新値がヘッダーの下に隠れてしまいます。できれば最小限の要素（<Box/>無し）でヘッダーとChartCard.tsxの表示が被らないようにしたいのですが、<Box/>は必要でしょうか？

よろしくお願いします。

React & Chakra-UIのバージョン
React: 17.0.2
Chakra-UI: 1.8.6

Answer 1

こうですかね

Containerを2つ作り、1つはHeader、1つはデータ表示領域にしています
Headerに関しては position: sticky を利用しているためデータ表示領域にBoxを指定しなくても被ることはないです

import { Container, Heading, Box, Spacer, Text } from "@chakra-ui/react"

export const ChartCard = ({ dataName, chartCardData }: { dataName: string, chartCardData?: any[] }) => {
  return (
    <Box
      bgColor={'black'}
      color={'white'}
    >
      <>
        <Heading fontSize={"6rem"}>{dataName}</Heading>
        <Spacer />
        <Text fontSize={"6rem"}>{`Some Title`}</Text>
      </>
      {
        chartCardData ?
          (
            <Box style={{ height: "300px" }}>
              <div>チャートデータ</div>
            </Box>
          ) : null
      }
    </Box>
  )
}

export default () => {
  return (
    <>
      <Container
        position={'sticky'}
        top={0}
        maxW="container.xl"
      >
        <Heading
          color={'white'}
          bgColor={'black'}
          fontSize={"6rem"}
          borderBottom={'solid 5px'}
          borderColor={'red'}
        >
          {'HEAD TITLE'}
        </Heading>
      </Container>
      <Container maxW="container.xl">
        <ChartCard dataName="testData" chartCardData={[null]} />
        <ChartCard dataName="testData" chartCardData={[null]} />
        <ChartCard dataName="testData" chartCardData={[null]} />
        <ChartCard dataName="testData" chartCardData={[null]} />
        <ChartCard dataName="testData" chartCardData={[null]} />
        <ChartCard dataName="testData" chartCardData={[null]} />
      </Container>
    </>
  )
}

Comments

[pierogi.user]

ありがとうございます。
Containerを二つ作るのがポイントなんですね。
Headerに関してもうまくいきました。
助かりました。