防止按钮占据其容器的整个宽度

Question

我在我的应用程序中使用 Material UI 按钮（在样式组件中进行自定义）。以前，通过将 size="small" 属性传递给按钮，按钮只占用按钮文本的宽度，加上我定义的一些填充。即使放在我创建的 Flexbox 容器中，它也会这样做。但是，当我为该 FlexContainer 组件定义宽度时，小按钮增加到该容器宽度的 100%。

我不想在按钮上定义默认宽度，因为它应该根据按钮文本适当调整大小。我尝试在按钮本身上设置 "display: inline-flex"，但这没有做任何事情。

这是容器组件（较大组件的片段）：

       <RightFields flexDirection="column">
          <FieldSpacing>
            <PasswordDisplay />
          </FieldSpacing>
          <FieldSpacing>
            <PaymentDisplay />
          </FieldSpacing>
          <Button pink
            buttonText="Save Changes"
            buttonSize="small"
          />
        </RightFields>


...

const RightFields = styled(FlexContainer)`
  width: 321px;
`

Button.js

const Button = ({buttonText, buttonSize, ...props}) => {

  return (
    <>
      {buttonSize === 'large' ?
        <LargeButton
          variant="contained"
          fullWidth={true}
          size="large"
          {...props}
        >
          {buttonText}
        </LargeButton> :
        <SmallButton
          variant="contained"
          size="small"
          {...props}
        >
          {buttonText}
        </SmallButton>
      }
    </>
  )

}

const StyledButton = styled(MaterialButton)`
  ...
  `

const LargeButton = styled(StyledButton)`
  ...
`

const SmallButton = styled(StyledButton)`
  display: inline-flex;
  flex-grow: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 16px;
  height: 28px;
  min-width: 50px;
  padding: 0 16px;
`

Answer 1

尝试使用 width: auto;

const SmallButton = styled(StyledButton)`
  display: inline-flex;
  flex-grow: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 16px;
  height: 28px;
  min-width: 50px;
  width: auto;
  padding: 0 16px;
`

这应该只换行到文本。

防止按钮占据其容器的整个宽度

Prevent button from taking up the full width of its container

css

flexbox

reactjs

material-ui

styled-components