ReactJS:如果所有的子组件都是功能组件，如何向子元素添加样式？

Question

我有一个项目，我想在那里应用某种风格。我尝试了如下方法(不适用于功能组件，而不是)：

const Parent = ({ children }) => {
  const style = { /* ... */ }

  const clones = React.Children.map(children, child => {
    return React.cloneElement(child, { style: style });
  });

  return (
    <div>
      {clones}
    </div>
  );
};

export default Parent;

在我的搜索过程中，我发现这个方法似乎只适用于类组件，而不适用于功能组件。这对我来说是个问题，因为整个项目只使用功能组件。

我还发现，人们通过向他们的子组件添加样式道具来规避这个问题(在我的例子中，我不能向任何子组件添加style道具)：

const Child = ({ style }) => {
  return (
    <div style={style}>
      hello world
    </div>
  );
};

export default Child;

只有当您可以编辑子组件以获得道具时，此方法才能工作，但我计划在其他无法编辑子组件的项目中使用此模块。因此，不幸的是，这个解决方案是不可行的。

编辑:在第3和第4段中增加更多的澄清。

Answer 1

也许，对子元素进行映射并使用具有指定样式的div元素包装每个子元素就足够了。正如我在对OP的评论中所写的，这一切都取决于所需样式修改的性质和孩子的结构：

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Parent>
        <ChildComponent />
        <ChildComponent />
      </Parent>
    </div>
  );
};

const Parent = ({ children }) => {
  const style = { color: "blue" };

  const clones = React.Children.map(children, (child) =>
   <div style={style}>{child}</div>
  );

  return <div>{clones}</div>;
};

const ChildComponent = () => {
  return <h2>this is a child component</h2>;
};
export default App;

Answer 2

当您将子对象传递给父级时，您可以看到更改。

见结果

export default function App() {
return (
<div className="App">
  <Parent>
    <Child />
  </Parent>
</div>
);
}

Answer 3

只需将子组件导入父组件并传递样式道具即可。

尝尝这个

import Child from 'path-to-child-file'

const Parent = ({ }) => {
  const style = { /* ... */ }

  return (
    <div>
      <Child style={style} />
    </div>
  );
};

export default Parent;

不需要编辑您的子组件