material-ui 버튼 크기 조정 방법

material-ui 버튼 크기 조정 방법

여기 코드가 있습니다.

+와 - 기호가 있는 작은 정사각형 버튼 3개와 가운데 숫자가 있는 버튼 1개를 준비하려고 합니다.저는 소재를 사용하고 있습니다.버튼이 직사각형으로 되어 있어서 앱에 맞지 않습니다.문제는 사각형과 크기를 조정할 수 없다는 것입니다.여러 가지 시도를 해봤지만 효과가 없어요.감사해요.

     <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>

최대/최소 너비/높이 스타일 옵션을 추가할 수 있습니다.

예:

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

이 경우 버튼은 항상 정사각형처럼 보이며 고정 크기(30px)를 가집니다.

내 생각에 당신은<Grid container>에워싸고 있습니다.MUI 그리드는 공간을 채우고 열 폭을 관리하도록 설계되었습니다.외부를 제한해야 할 것 같네요<Grid container>열을 확장하려는 총 너비로 지정합니다.

또, 모든 것을 덮어쓰려는 경우에도 주의해 주세요.<Buttons>, 테마에서 그렇게 한다...

createMuiTheme({
  overrides: {
    MuiButton: {
      outlined: {
        borderRadius: '0'
      }
    }
  }
})

머티리얼 UI 5.x.x

createTheme({
  components: {
    MuiButton: { 
      styleOverrides: { 
        root: { minWidth: 0 } 
      } 
    }
  }
})

<Button
  fullWidth
  variant="outlined"
  startIcon={<CloudUploadIcon />}
  style={{ textTransform: "none", padding: "14px 0px" }} //button Size change in React Material Ui
  className={classes.btnFont}
  onClick={() => ref.current.click()}
>

언급URL : https://stackoverflow.com/questions/51039448/how-to-resize-a-material-ui-button