Vue.js中向共享按钮组件传递style指令不生效的问题

• 检查:style语法是否正确
  你当前的:style="padding: 12px 15px 12px 15px"写法存在语法错误，Vue的:style绑定的是JavaScript表达式，直接写CSS声明会被解析成无效JS。正确写法有两种：

  1. 字符串包裹形式：

     <Button
       @on-click="currentStep = 2"
       :text= "Next"
       :style="'padding: 12px 15px 12px 15px'"
     />
     

  2. 对象形式（更推荐，便于后续动态调整样式）：

     <Button
       @on-click="currentStep = 2"
       :text= "Next"
       :style="{ padding: '12px 15px 12px 15px' }"
     />
     

• 确保自定义Button组件传递了style属性
  Vue自定义组件不会自动将父组件传入的style等属性传递给内部的原生按钮元素，需要手动处理：
  在button.vue中，把父组件传入的style绑定到内部的<button>标签上，可通过$attrs接收所有未被props声明的属性：

  <template>
    <button :style="$attrs.style" @click="$emit('on-click')">
      {{ text }}
    </button>
  </template>
  
  <script>
  export default {
    props: ['text'],
    // 可选：关闭根元素自动继承父组件属性（若组件根元素不是原生button时推荐开启）
    inheritAttrs: false
  }
  </script>
  

• 排查组件内部样式优先级问题
  如果上述两步操作后样式仍未生效，检查button.vue的scoped样式是否用!important强制覆盖了padding，比如：

  <style scoped>
  button {
    padding: 8px !important; /* 该写法会覆盖行内style */
  }
  </style>
  

  解决方法：移除!important；若必须保留，可在父组件通过深度选择器设置样式（不依赖行内style的场景）：

  <style scoped>
  ::v-deep .your-button-class {
    padding: 12px 15px !important;
  }
  </style>
  

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