css - How to change style of an element in React without using querySelector?

Question

I am new to the React. Here, I'm trying to override the CSS of a class based on a condition

let customizeColumn = document.querySelector(".main-table-body");
!expandFilter ? customizeColumn.setAttribute("style", `height:calc(100vh - 345px)`) : customizeColumn.setAttribute("style", `height:calc(100vh - 302px)`);

Here, I am managing the state of this variable and I am calling toggleFilter on the button click

const [expandFilter, toggleFilter] = useState(false);

But I don't want to use document.querySelector(".main-table-body") to fetch the class, Is there any other way of doing this. I am using Material-UI too. If that helps

question from:https://stackoverflow.com/questions/65516915/how-to-change-style-of-an-element-in-react-without-using-queryselector

Answer 1

In the render of the main-table-body, check the state to determine what CSS property it should have, eg:

return (
  <table 
    class="main-table-body"
    style={{ height: `calc(100vh - ${expandFilter ? 302 : 345}px)` }}
  >
    // table contents
  </table>
);