Javascript 切换文本时保持恒定的按钮宽度。（CSS中没有固定宽度）

我有一个按钮组件，有固定的填充，没有固定的宽度。这个按钮在很多地方都有使用，我希望这个按钮根据按钮上显示的文本改变宽度

我现在尝试在按钮中添加一个切换微调器，这样当用户单击按钮时，文本将消失并显示微调器。我遇到的问题是，由于微调器的宽度与文本的宽度不同，因此按钮的大小一直在调整

export const Buttons = styled.button`
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
`

---

这些是我当前的按钮样式。

如果你不想/可以固定按钮宽度，一个选项（可能不是最好的，但它会起作用）你可以尝试在加载微调器时使按钮文本透明，并将微调器绝对定位在按钮内。例如，您可以有如下内容：

<button>
   <span class="text">Press here</button>
   <span class="spinner"></spinner>
</button>

//CSS
.spinner { 
   //Your CSS styles here
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
   display: none;
 }

---

这种解决办法应该是可行的，也许不是最好的方法，但有一种方法：D/P>你可以考虑保留文本，但是把它设置成透明的颜色。然后，微调器可以位于文本顶部的绝对位置。如果要固定按钮宽度，则需要通过向其样式添加宽度属性来显式固定按钮宽度。

button.loading .text {
   color: transparent;
}

button.loading .spinner {
   display: block;
}