Problems with my css-in-js sheet and how to mix up different overflows in React

Hi so in my React project, my broad goal is to have no overflow on the home page, but allow elements elsewhere on other pages with more content to be scrollable (in the same way that you can place an iframe in HTML for instance).

When I set the base index.css to overflow hidden, it over hauls all other overflow code for the styled-component elements. I guess it makes sense as this is at the top level.

I'm using react-router-dom to navigate to other pages. Everything is working fine broadly speaking..

Currently I'm trying to convert the base index.css, to styles.js The idea being that I could feed in props that allow me to determine when to scroll and when not to.. Unfortunately however, after importing the sheet, and applying it to index.js, it doesn't change any styling.

If you can help point out the mistakes in my css-in-js code that would be great, but also your thoughts on how to achieve the underlying goal would be appreciated also..

export const styles = () => {
  const baselineStyles = {
    body: {
  margin: 0,
  fontFamily: [
    "-apple-system",
    "BlinkMacSystemFont",
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    "sans-serif",
  ],
  "-webkit-font-smoothing": "antialiased",
  "-moz-osx-font-smoothing": "grayscale",
  overflow: "hidden",
},

code: {
  fontFamily: ["source-code-pro", "Menlo", "Monaco", "Consolas", 'Courier New',
    "monospace"],
},
  }
  return baselineStyles
}

index.js (root level)

let sheet = styles();
let bodySheet = sheet.body;
console.log(bodySheet);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <App style={[bodySheet.fontFamily, bodySheet.margin]}/>
  // </React.StrictMode>
);