如何在solid-js和Tailwind CSS中設置特定組件的背景顏色？

Question

我在index.css文件中將我的solid-js 應用程序的背景顏色設置為灰色。 但是，我希望我的<App/>組件具有與其他組件不同的白色背景。 我寫了以下代碼：

    function App() {
      if (document.querySelector('.App')) {
        document.querySelector('.App').style.backgroundColor = "#fff";
      }
      
      useNetworkStatus();
      return (
        <div class="App">
        </div>
      );
    }

但這不起作用，所以我將代碼更改為：

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

但是，我的solid-js 應用程序的所有組件都不再具有灰色背景色，而是白色，除了<App/>組件保持其灰色（這是我想切換到白色背景的組件） ）。

這是我的index.css文件的內容。 正如我之前解釋的，我只希望組件<App/>具有與其他組件不同的白色背景色。 迫不及待地等待您的答復，謝謝！

Answer 1

您不需要命令式 API，只需在元素本身上使用 style 屬性：

function Component() {
  return (
    <div style={{['background-color']: '#e1e1e1'}}>
      Some Custom Component
    </div>
  );
}

與 React 不同，Solid 在其樣式道具中使用 kebab-case 屬性名稱，如['background-color'] 。

您還可以使用 css 類在元素上使用class設置組件樣式：

function Component() {
  return (
    <div class="bg some-class">
      Some Custom Component
    </div>
  );
}