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

Ensuring consistent width for two divs using CSS

Trouble displaying complete image (ReactJS, CSS)

The Material-UI TreeView component fails to update when new children are added

The issue of being unable to retrieve data from an API within a docker container from a React application is caused by the 'Access-Control-Allow-Origin'

There are no elements displayed beneath the div

Uploading a file from a React contact form using Axios may result in S3 generating empty files

Tips for effectively utilizing CSS classes with current-device

Parsing error encountered while trying to handle an unexpected token at line 214, character 33. It appears that an appropriate loader is missing to process this particular file type

Exploring the height and overflow properties of nested div elements

How can I display multiple images in a single row using PHP echo?

Tips for simulating redux-promise-listener Middleware and final-form

How can we utilize CSS floats to achieve maximum widths?

Comparing Material UI Input and TextField components for Readonly displays

The height percentage is not functioning properly even though it has been applied to the html, body, and all wrapper elements

Use JavaScript to load and set a background image for a div

Display <span> next to <select>

React: Refs cannot be assigned to function components when rendering a modal

Clicking on a different texture/image allows for the texture to change in Three.js

Leverage React components for efficient code reuse and export modules for

How can I incorporate an onClick event into the HelperText of a Material UI TextField?