无法获得 nextjs 按钮手动背景颜色以与顺风一起使用

Question

我想在我的按钮上添加十六进制颜色。我在我的项目中使用 tailwindcss。我可以使用类似的东西设置背景颜色：

bg-blueGray-700

在类名里面。但我想添加一个可以动态的自定义十六进制。

如果我直接通过检查器添加以下内容，按钮将改变颜色：

background-color: #fff

如果我把它放到代码中，它会通过检查器显示，但按钮不会显示它。

      <button
        background-color="#FFF"
        className="px-4 py-4 rounded"
        onClick={(e) => {
          e.preventDefault();
          doSomething();
        }}
      >
        Color
      </button>

Answer 1

如果您想直接设置元素的样式，则必须使用样式属性:

<button style={{backgroundColor: "#FFF"}}

Css 规则名称的写法不同，因为您传递了一个对象：https://reactjs.org/docs/dom-elements.html#style

无法获得 nextjs 按钮手动背景颜色以与顺风一起使用

Can't get nextjs button manual background color to work with tailwind

reactjs

next.js

tailwind-css