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> ); };
Comments
Post a Comment