Issue
How I can (using react way) add a myCustomClass in div by role attribute (presentation)? Component don't expose any way to add my custom class and I dont change all componets (using css way), only this component.
<div class="css-1dozdou">
<div role="presentation" class="myCustomClass css-l0iinn"><div ..
Solution
Well, as I understood you, you have some third-party component, so you can't change its code. Then you should add some "magic" to overcome the problem.
First of all you should define a ref. Add it to the troubled component or its parent div as parameter ref={ref}
. From now on you have a DOM object. Next you should search for div with role via native JS and add the class.
const App = () => {
const ref = useRef(null);
useEffect(() => {
const divs = ref.current.querySelector('[role="presentation"]');
if (divs.length) {
divs[0].add('myCustomClass');
}
})
return (
<div>
<h1>Change a class of a div inside child</h1>
<div ref={ref}><ThirdPartyComponent /></div>
</div>
);
};
const ThirdPartyComponent = () => {
return (
<div class="css-1dozdou">
<div role="presentation" class="myCustomClass css-l0iinn">
Some component
</div>
</div>
);
};
Answered By - KusokBanana
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.