CODEWITHSUNDEEP
reactjstypescriptstyled-components
yuturo
yuturo

Reputation: 211

react I want to change the style in the props I pass

I am using react and styled-components.
I want to apply the style defined in the dataList when I pass the page name (home,group) to the body component as a props.
I would like to apply the home style of dataList to the box when home is passed in props, and the group style of dataList to the box when group is passed.

I tried to implement it in my own way, but an error occurs at the dataList location.

code

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

type Props = {
  type: "home" | "group";
};

export const Body: React.FC<Props> = ({ children, type }) => {
  const dataList = {
    home: {
      gridTemplateAreas: 'header''body',
      gridTemplateRows: 30px calc(100vh - 100px),
      padding: 30
    },
    group: {
      gridTemplateAreas: 'header''menu''body',
      gridTemplateRows: 30px calc(100vh - 70px),
      padding: 30
    }
  };
  const data = dataList[type];
  return <Box props={data}>{children}</Box>;
};

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

Upvotes: 0

Views: 592

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 5054

You have to pass data as props in Box component. It would be like this:

const data = dataList[type];
return <Box {...data}>{children}</Box>;

Here is working demo: https://codesandbox.io/s/weathered-fire-7soy9?file=/src/Body.tsx:458-528

Upvotes: 1

Related Questions