Как изменить размер кнопки «Материал-интерфейс»

Question

У меня есть этот код здесь:

Я пытаюсь получить 3 маленькие квадратные кнопки со знаком + и - и одну посередине с цифрой. Я использую материал. Кнопки теперь прямоугольные и слишком большие для моего приложения. Моя проблема в том, что я просто не могу сделать их квадратными и изменить их размер. Я много чего перепробовал, но это не сработало. Спасибо

     <Grid item>
        <Button onClick={this.up} variant="outlined">
          <Add color="secondary" />
        </Button>
        <Button style={{ padding: "11px 0px" }} variant="outlined">
          {this.state.quantity < 1 ? 0 : this.state.quantity}
        </Button>
        <Button onClick={this.down} variant="outlined">
          <Remove color="secondary" />
        </Button>
      </Grid>

Answer 1

Вы можете добавить параметры стиля максимальная / минимальная ширина / высота.

Например:

<Button style={{maxWidth: '30px', maxHeight: '30px', minWidth: '30px', minHeight: '30px'}}/>

В этом случае кнопка всегда будет выглядеть как квадрат и иметь фиксированный размер (30 пикселей).