如何在solid-js和尾风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，只需对元素本身使用样式支柱：

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>
  );
}