如何让父组件的button-border类样式作用于内部子button元素？

当然可以做到，给你几个实用的方案：

方案一：修改CSS选择器（最直接） #

直接把你写的.button-border样式选择器，改成针对父组件下的子Button：

/* 替换原来的.button-border {} */
.button-border button {
  /* 这里放你原来为.button-border定义的所有样式 */
  border: 2px solid #2196F3;
  padding: 8px 16px;
  /* 其他样式... */
}

这样只要父元素<custom-component>带有button-border类，里面的<button>就会自动应用这些样式，效果和给Button直接加类完全一样。

方案二：用CSS变量复用样式（适合样式需要多处复用的情况） #

如果不想重复写样式代码，可以把.button-border的样式抽成CSS变量，然后让父组件和子Button都引用这些变量：

/* 定义全局变量 */
:root {
  --btn-border: 2px solid #2196F3;
  --btn-padding: 8px 16px;
  --btn-radius: 4px;
}

/* 原来的.button-border类保留（如果还有其他地方用到） */
.button-border {
  border: var(--btn-border);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
}

/* 父组件下的子Button引用变量 */
.button-border button {
  border: var(--btn-border);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
}

这种方式能保证样式统一，后续修改变量就能同步更新所有地方的样式。

方案三：JS动态添加类（适合需要动态控制的场景） #

如果用的是前端框架（比如Vue/React），可以在组件挂载完成后，给子Button手动添加button-border类；原生JS也能实现：

// 原生JS示例
const customComp = document.querySelector('.button-border');
if (customComp) {
  const btn = customComp.querySelector('button');
  btn.classList.add('button-border');
}

不过这种方式需要依赖DOM加载顺序，不如CSS方案稳定，优先推荐前两种。

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