如何为元素的所有子元素添加样式

Question

例如，我如何在此代码段中实现 addStyles 函数

const addStyles = // ...
const Element = ({ children }) => (
    <div>{children.map(addStyles)}</div>
);

谢谢

Answer 1

使用 facebook 提供的 React.Children.map 功能。

Invokes a function on every immediate child contained within children with this set to thisArg. If children is a keyed fragment or array it will be traversed: the function will never be passed the container objects. If children is null or undefined, returns null or undefined rather than an array.

然后 return 每个 child 的一个克隆，具有适当的样式，就像使用 React.cloneElement 一样。这将浅合并第二个参数中 object 中提供的任何属性。您可以使用它来覆盖 children 的当前样式。如果愿意，您可以提供 { className: "newClassName" } 作为第二个参数。

const StylishComponent = ({ children }) => {
    const iLikeBlueStyles = { color: "blue" };

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

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

如何为元素的所有子元素添加样式

How can I add styles to all the children of an element

reactjs

styled-components