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

【问题标题】：Better way to style Styled Component Dynamically - React Styled Components动态样式化组件样式的更好方法 - React Styled Components
【发布时间】：2024-01-30 23:10:01
【问题描述】：

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

每个“框架类型”没有太多共同的 CSS。将每种类型的Frame 都作为单独的组件会更好吗？或者有没有更好的方法可以让我更轻松地构建它。

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;

[...]

父组件

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

【问题讨论】：

当然。您可以接受一个字符串道具，我们将其命名为type。 <Frame type="sidepanel">。然后根据 props 在你的样式化组件（一个）中添加条件 CSS。

标签： reactjs styled-components

【解决方案1】：

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

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>

【讨论】：