CODEWITHSUNDEEP
reactjsstyled-components
Joeyboy
Joeyboy

Reputation: 472

Better way to style Styled Component Dynamically - React Styled Components

I would like to render the Frame component with different css depending on the prop received.

There is not much CSS in common with each 'Frame Type'. Would I be better off making each type of Frame a separate component? Or is there a better way I can structure this which is less bloated.

Frame.js

import {
  NavFrame,
  SidepanelFrame,
  HomeFrame,
  MobileSidepanelFrame,
  MapFrame,
} from "./FrameStyles";

export default function Frame(props) {
  return props.nav ? (
    <NavFrame>{props.children}</NavFrame>
  ) : props.home ? (
    <HomeFrame>{props.children}</HomeFrame>
  ) : props.sidepanel ? (
    <SidepanelFrame>{props.children}</SidepanelFrame>
  ) : props.mobileSidepanel ? (
    <MobileSidepanelFrame>{props.children}</MobileSidepanelFrame>
  ) : props.map ? (
    <MapFrame>{props.children}</MapFrame>
  ) : (
    <div />
  );
}

FrameStyles.js

export const MobileSidepanelFrame = styled.div`
  grid-area: sidepanel;
  display: flex;
  align-items: center;

  background-color: white;

  z-index: 2;
`;

export const HomeFrame = styled.div`
  height: 100%;
  display: grid;

  grid-template-rows: 0.175fr 0.08fr 0.24fr 0.36fr 0.08fr 0.065fr;
  grid-row-gap: 0.5rem;
`;

export const MapFrame = styled.div`
  grid-area: map;
  height: auto;

[...]

`;

Parent Component

   <Frame sidepanel>
      {props.children}
    </Frame>

Upvotes: 0

Views: 1182

Answers (1)

Ioannis Potouridis
Ioannis Potouridis

Reputation: 1316

You don't need separate styled components or even a function component. You only need one styled component with one string prop. You can use functions to compose your styles depending on each type (variant).

const home = props => {
  if (props.variant !== "home") return css``;

  return css`
    display: grid;
    height: 100%;
  `;
};

const map = props => {
  if (props.variant !== "map") return css``;

  return css`
    height: auto;
    grid-area: map;
  `;
};

const Frame = styled.div`
  ${home};
  ${map};
`;

And then you can use it like this:

<Frame variant="home">
  <p>Your home content</p>
</Frame>

Upvotes: 2

Related Questions