SolidJS项目设置<App/>组件背景色时出现赋值表达式左侧无效错误

return (<App/>)

为什么你的代码会报错？ #

1. 可选链不能作为赋值左操作数：document.querySelector('.App')?.style.backgroundColor = "#fff" 里的?.会导致左侧可能是undefined，JS不允许给undefined赋值，这就是Invalid left-hand side in assignment expression错误的根源。
2. DOM元素还未挂载：组件函数执行时，return的JSX还没被渲染到DOM中，document.querySelector('.App')根本找不到目标元素；就算移到index.jsx，render执行后组件也可能还没完成挂载，同样拿不到元素。

正确的实现方式 #

方法一：内联样式（最简单直接）

直接在JSX元素上通过style属性设置背景色：

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

export default App;

方法二：CSS类（更易维护）

先在对应的CSS文件（比如App.css）中定义样式：

.App {
  background-color: #ffffff;
}

然后在App.jsx中导入该CSS文件：

import './App.css';

function App() { 
  return (
    <div class="App">
      <Suspense fallback={<WhelpsLoader />}>
        <AppRouter />
        <Snackbars />
      </Suspense>
    </div>
  );
}

export default App;

方法三：使用SolidJS的Ref（必须操作DOM时用）

如果一定要通过DOM操作实现，用SolidJS的createRef和onMount钩子，确保DOM元素挂载后再操作：

import { onMount, createRef } from 'solid-js';

function App() { 
  const appRef = createRef();

  onMount(() => {
    if (appRef.current) {
      appRef.current.style.backgroundColor = "#fff";
    }
  });

  return (
    <div class="App" ref={appRef}>
      <Suspense fallback={<WhelpsLoader />}>
        <AppRouter />
        <Snackbars />
      </Suspense>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者gks