Invalid left-hand side in assignment expression in solidjs

I’m working on a solid-js project. I am using gray color as my app background color. I would like to make the <App/> component a white background color. For this I wrote the following code:

function App() { 
        ...
  document.querySelector('.App')?.style.backgroundColor = "#fff"
  return (
    <div class="App">
    <Suspense fallback={<WhelpsLoader />}>
      <AppRouter />
      <Snackbars />
    </Suspense>
    </div>
  );
}

export default App;

But when I run my application, it shows me an error window with this error:

Invalid left-hand side in assignment expression. (14:2)

and I get the following error in console line:

GET http://localhost:3000/src/index.jsx?t=1660071842396 net::ERR_ABORTED 500 (Internal Server Error)

I thought that I had inserted the background color definition line in the wrong file since the error came from the index.jsx file. So I removed this line from my App.jsx file and modified my index.jsx file like this:

render(
  () => (
    <Router>
      <UIProvider>
        <AuthProvider>
          <NotificationProvider>
            <App />
          </NotificationProvider>
        </AuthProvider>
      </UIProvider>
    </Router>
  ),
  document.getElementById("root")
 
);
  
document.querySelector('.App')?.style.backgroundColor = "#fff"

But that didn’t solve my problem. Now, all I want is to set the background color of my component to white.

>Solution :

You can’t use ?. operator with =

Do this instead

if (document.querySelector('.App')) {
  document.querySelector('.App').style.backgroundColor = "#fff"
}