Is there a way to alter the styling of a React element without resorting to querySelector?

Question

Is there a way to alter the styling of a React element without resorting to querySelector?

Just diving into React and I'm faced with a challenge - how to update 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)`);

Currently, I am keeping track of the state of 'expandFilter' and toggling it with a button click.

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

However, I'd prefer not to rely on

document.querySelector(".main-table-body")

for accessing the class. Is there an alternative method that doesn't involve directly grabbing the element? Also, I am utilizing Material-UI, if that offers any solutions.

css reactjs material-ui

Answer 1

Answer №1

When rendering the main-table-body, it is important to check the state in order to determine the appropriate CSS property for it, such as:

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

Answer 2

When rendering the main-table-body, it is important to check the state in order to determine the appropriate CSS property for it, such as:

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

Answer 3

Answer №2

To add style, simply use the style attribute.

Here's an example of how you can do this in the render method:

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

Answer 4

To add style, simply use the style attribute.

Here's an example of how you can do this in the render method:

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

Is there a way to alter the styling of a React element without resorting to querySelector?

Answer №1

Answer №2

Similar questions

Validate prop must consist of one of two functional components

When inserting a page break after a section, it seamlessly flows to the next page during printing

Tips for aligning two divs vertically and horizontally next to each other

The text inside the Mapbox GL popup cannot be highlighted or copied

Is there a way to activate an Electron API using a remote server?

Troubleshooting: Next JS tab indicator does not work when using tabs with links

What sets React.FC<T> apart from Function() in TypeScript?

Tips for arranging divs in CSS grid with grid-template-areas technique

Is there a way for me to keep an image stationary on the page while allowing overlaying text to move?

Add value to input only if there is data available using a React functional component

What is the process for obtaining a push key in Firebase?

Using React.js - What is the process for submitting a form automatically when the page loads?

Is there a way to resolve the issue of my localStorage getting overridden on page refresh?

Position a div element on top of Google Maps to create a floating

Error: The variable "details.date.getTime" is not defined and cannot be accessed

I was having trouble getting my npm to run properly during initialization. I'm hoping this is not the main issue. Could someone please review my work? It doesn't seem to be rendering as expected

How can I ensure that Chakra UI MenuList items are always visible on the screen?

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

How to ensure that a React Material-UI Fab Button remains fixed in a specific position on the screen

Using multiple header tags in HTML