Add css class to 3rd component div by role-CodePudding

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 >
    <div role="presentation" ><div ..

CodePudding user response：

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 >
      <div role="presentation" >
        Some component
      </div>
    </div>
  );
};