the code I was trying to reuse was adding a class "filtering" to document body with the logic that a filter box appears when this class is set

function openFilters() {
    document.body.classList.add('filtering');

the problem I encountered resulted from scoped CSS using styled-jsx (but would probably exist with any other method unless using global CSS)

here is an example how CSS was written for the filters container:

  .filtering .container-filters {
    position: absolute;
    transform: translateY(4rem);
  }

the problem is that with styled-jsx all class names are transformed to something cryptic to prevent name clashes and achieve component scoped styles. so the selector .filtering .container-filters is never matched as it's being transformed by styled jsx but the class "filtering" is added to body without name transformation (can't tell the exact reasons, but apparently body is treated differently in Next.js because of the Server Side Rendering or maybe because of the global scope in styled-jsx)

my solution to being able to use the existing code was to wrap everything in a div and apply the "filtering" class to that div using a ref

  const wrapperRef = useRef(null)

  function openFilters() {
    wrapperRef.current.classList.add("filtering")

<div ref={wrapperRef}>