React项目中按钮设置margin-left无效的问题咨询

问题根源及修复步骤： #

• CSS语法错误：你写的.button样式里，margin-left 5px缺少了冒号，正确写法是margin-left: 5px;
• 样式未绑定到按钮：所有按钮元素都没添加className="button"，自定义样式根本没作用到目标元素上
• Tailwind优先级冲突（可选优化）：既然项目用了Tailwind CSS，直接用它的内置类更高效，还能避免自定义样式被Tailwind覆盖的问题

修复方案1：修复自定义CSS #

把样式语法改对，同时给按钮加上对应类：

<style>
  .button {
    margin-left: 5px; /* 补上冒号 */
  }
</style>
<div className="flex flex-col items-center justify-center h-screen">
  <img className="h-48 m-4" src={logo} alt="logo" />
  <div className="flex p-6">
    <Link to={`/1`}>
      <button
        disabled={!status}
        className={
          status
            ? "button bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
            : "button bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
        }
      >
        1
      </button>
    </Link>
    <!-- 其他按钮同理，在className里加上button类 -->
    <Link to={`/2`}>
      <button
        className={
          status
            ? "button bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
            : "button bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
        }
      >
        2
      </button>
    </Link>
    <Link to={`/3`}>
      <button
        className={
          status
            ? "button bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
            : "button bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
        }
      >
        3
      </button>
    </Link>
  </div>
  <p className="text-sm text-gray-500 mx-2 py-2">{description}</p>
</div>

修复方案2：用Tailwind内置类（更推荐） #

直接在按钮的className中添加ml-[5px]（精确设置5px），不需要额外写style标签，还能避免优先级问题：

<div className="flex flex-col items-center justify-center h-screen">
  <img className="h-48 m-4" src={logo} alt="logo" />
  <div className="flex p-6">
    <Link to={`/1`}>
      <button
        disabled={!status}
        className={
          status
            ? "bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
            : "bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
        }
      >
        1
      </button>
    </Link>
    <!-- 第二个及以后的按钮加ml类，第一个按钮不加避免左侧多余边距 -->
    <Link to={`/2`}>
      <button
        className={
          status
            ? "ml-[5px] bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
            : "ml-[5px] bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
        }
      >
        2
      </button>
    </Link>
    <Link to={`/3`}>
      <button
        className={
          status
            ? "ml-[5px] bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
            : "ml-[5px] bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
        }
      >
        3
      </button>
    </Link>
  </div>
  <p className="text-sm text-gray-500 mx-2 py-2">{description}</p>
</div>

额外优化：父容器统一控制间距 #

如果不想给每个按钮单独加边距，可以给按钮的父容器（flex p-6的div）加上space-x-[5px]类，自动给子元素之间添加横向间距，代码更简洁：

<div className="flex p-6 space-x-[5px]">
  <!-- 所有按钮无需额外加ml类，父容器自动处理间距 -->
</div>

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