时间戳

首页 > 解决方案 > 动态样式化组件样式的更好方法 - React Styled Components

reactjs - 动态样式化组件样式的更好方法 - React Styled Components

问题描述

我想Frame根据收到的道具用不同的 css 渲染组件。

每个“框架类型”没有太多共同的 CSS。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 />
  );
}

框架样式.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;

[...]

`;

父组件

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

标签： reactjsstyled-components

解决方案

您不需要单独的样式组件甚至函数组件。您只需要一个带有一个字符串道具的样式组件。您可以根据每种类型（变体）使用函数来组合样式。

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

然后你可以像这样使用它：

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

推荐阅读