如何让ModalFooter中仅提交按钮自适应文本宽度不换行

问题根源在于你给所有按钮统一设置了flex: 1 0 [计算宽度]，强制两个按钮平分容器宽度，导致文本长度超出按钮可用空间时被迫换行。要实现提交按钮自适应文本、取消按钮保持原有尺寸，可按以下方式修改代码：

修改样式规则 #

取消全局的按钮flex设置，针对不同按钮单独配置样式逻辑：

const ModalFooter = styled.div<{ numberOfButtons?: number }>`
  display: flex;
  justify-content: flex-end;
  flex-flow: row wrap;
  gap: ${theme.spacing.pixel[100]} ${theme.spacing.pixel[100]};
  margin-top: ${theme.spacing.pixel[200]};
  width: 100%;

  :empty {
    display: none;
  }

  // 取消按钮（第一个子元素）维持原尺寸规则
  & > :first-child {
    flex: 1 0 
      ${({ numberOfButtons = 2 }) =>
        `calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${numberOfButtons - 1})`};
  }

  // 提交按钮（最后一个子元素）自适应文本，禁止换行
  & > :last-child {
    flex: 0 0 auto;
    white-space: nowrap;
  }
`;

关键说明 #

• flex: 0 0 auto让提交按钮仅占据文本所需宽度，不会被拉伸或压缩；
• white-space: nowrap强制文本保持单行，确保"Create User"不会换行；
• 若按钮顺序并非「取消→提交」，建议给按钮添加专属类名（如submit-btn），通过& > .submit-btn定位会更稳妥。

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