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

for example how implement addstyles function in snippet

const addstyles = // ... const element = ({ children }) => (     <div>{children.map(addstyles)}</div> ); 

thanks

use react.children.map function provided facebook.

invokes function on every immediate child contained within children set thisarg. if children keyed fragment or array traversed: function never passed container objects. if children null or undefined, returns null or undefined rather array.

then return clone of each child appropriate style using react.cloneelement. shallowly merge property provided in object in second argument. use override current styles of children. potentially provide { classname: "newclassname" } second argument if prefer.

const stylishcomponent = ({ children }) => {     const ilikebluestyles = { color: "blue" };      const clones = react.children.map(children, child => {         return react.cloneelement(child, { style: ilikebluestyles });     });      return (         <div>             {clones}         </div>     ); };