Styled-components - 动态CSS？答案

【问题标题】：Styled-components - dynamic CSS?Styled-components - 动态CSS？
【发布时间】：2021-04-06 03:30:09
【问题描述】：

我有一个简单的 React 应用程序，它以 JSON 形式从外部源获取 CSS，样式如下所示：

{
  "DOMElements": [
    {
      "padding": "1rem",
      "margin": "5rem",
    },
    {
      "boxSizing": "border-box",
      "height": "10px",
    }
  ]
}

因此，当我收到上述回复时，我希望得到如下结果：

import styled from 'styled-components';

const DOMElement1 = styled.div`
   padding: 1rem,
   margin: 5rem,
`;

const DOMElement2 = styled.div`
   boxSizing: border-box,
   height: 10px,
`;

const Page = ({ children }) => (
  <>
    <DOMElement1>{children[1]}</DOMElement1>
    <DOMElement2>{childrem[2]}</DOMElement2>
  </>
);

值得注意的是，未知的 DOMElement 数量，可能是 1，也可能是 50。

组件部分很简单，我可以做indexed map 并在每个循环中增加索引。我面临的问题是 - 如何基于 JSON 响应创建动态样式组件道具？我需要在组件本身内执行此操作，因为我知道 DOMElements 的外观，但 styled-components 应该在组件功能之外......我错过了什么？它甚至可行吗？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

一个简单直接的解决方案是在您的样式组件中动态获取道具，这样您就无需担心任何传入的 css 属性。

参考下面的例子/thissn-p-

const DOMElement = styled.div`
   ${props => props}
`;

const Page = () => {
  const data = {
    "DOMElements": [
      {
        "padding": "1rem",
        "margin": "5rem",
      },
      {
        "boxSizing": "border-box",
        "height": "10px",
      }
    ]
  };

  return (
    <>
     {data?.DOMElements?.map((obj, index) => 
        <DOMElement {...obj} key={index}>abcd</DOMElement>
      )}
    </>
  );
}

输出快照 -

【讨论】：

【解决方案2】：

类似这样的：

const items = [
  {
    background: "blue",
    width: "30px",
    height: "30px",
    padding:'10px'
  },
  {
    height: "40px",
    background: "red",
    width: "30px",
    padding:'10px'
  }
];

const components = items.map((item) =>
  styled("div")({
    ...item
  })
);

export default function App() {
  return (
    <div style={{ background: "lightblue", width: "100vw", height: "100vh" }}>
      {components.map(Comp => <Comp>hi</Comp>)}
    </div>
  );
}

【讨论】：

items 将作为道具发送到App，因此我无法在App 组件之外访问它们：[
你可以在里面做：return items.map((item) => styled("div")({ ...item }) ).map(C => <C />) }

【解决方案3】：

您可以为样式化的组件提供道具。

const DOMElement1 = styled.div`
   padding: ${({padding}) => padding}rem,
   margin: ${({margin}) => margin}rem,
`;

const Page = ({ children }) => (
  <>
    <DOMElement1 padding={valueFromJson} margin={valueFromJson}>{children[1]}</DOMElement1>
    <DOMElement2 padding={valueFromJson} margin={valueFromJson}>{childrem[2]}</DOMElement2>
  </>
);

【讨论】：

我知道，问题是我不会有两个 DOM 元素，它们的数量将是动态/未知的，这只是一个示例。我会使用children.map，而不是像上面的代码那样硬编码DOMElements。