为何<mj-attributes>内的mj-button样式无法生效？

MJML中<mj-attributes>无法覆盖<mj-button>默认padding的核心原因是样式优先级冲突：

• MJML编译<mj-button>时，会将默认的10px 25px padding直接作为内联样式插入到生成的HTML按钮元素中。
• 无论是在<mj-attributes>里直接设置<mj-button padding="xxx">，还是通过自定义类设置padding，这些样式最终都会被编译到页面头部的CSS类中。
• 由于CSS中内联样式的优先级远高于外部CSS类，所以全局设置的padding会被默认的内联padding覆盖；只有在<mj-button>标签上直接设置的padding会替换默认内联值，因此能生效。

1. 使用<mj-style>强制覆盖（最简单） #

在<mj-head>中添加<mj-style>标签，通过CSS的!important强制覆盖内联样式：

<mj-head>
  <mj-style>
    /* 全局覆盖所有按钮的padding */
    .mj-button {
      padding: 15px 20px !important;
    }
    /* 针对自定义类的按钮单独设置 */
    .btn-red {
      padding: 15px 20px !important;
      background-color: #ff0000 !important;
    }
  </mj-style>
</mj-head>

2. 自定义按钮组件（更优雅） #

创建一个继承自<mj-button>的自定义组件，预设默认padding，后续直接使用该组件即可：

<mj-head>
  <mj-component name="custom-button">
    <mj-button padding="15px 20px" background-color="{{backgroundColor}}">
      {{content}}
    </mj-button>
  </mj-component>
</mj-head>

<mj-body>
  <mj-section>
    <mj-column>
      <custom-button backgroundColor="#ff0000">自定义红色按钮</custom-button>
    </mj-column>
  </mj-section>
</mj-body>

3. 全局属性+样式组合（折中方案） #

如果仍想使用<mj-attributes>管理类，配合<mj-style>增强优先级：

<mj-head>
  <mj-attributes>
    <mj-class name="btn-red" background-color="#ff0000" />
  </mj-attributes>
  <mj-style>
    .btn-red {
      padding: 15px 20px !important;
    }
  </mj-style>
</mj-head>

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