当Material-UI网格的大小更改时，如何更改Chart.js图的大小？

Question

我正在使用React，并且正在将Chartjs与react-chartjs-2库一起使用，以显示界面的图形和Material UI。我在Bar组件中有一个Grid图形，如下所示：

<div style={{ height: "auto" }}>
  <h1>Tamaño {this.state.tamano}</h1>
  <Select
    value={this.state.tamano}
    onChange={e => this.setState({ tamano: e.target.value })}
  >
    <MenuItem value={4}>4</MenuItem>
    <MenuItem value={6}>6</MenuItem>
    <MenuItem value={12}>12</MenuItem>
  </Select>
  <Grid item component={Card} xs={this.state.tamano}>
    <Bar
      data={{
        labels: ["Carros", "Aviones", "Barcos"],
        datasets: [
          { label: "Empresa 1", data: [5, 2, 3] },
          { label: "Empresa 2", data: [4, 3, 4] }
        ]
      }}
      options={{
        maintainAspectRatio: false,
        title: {
          display: true,
          text: "Un chart de ejemplo"
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                callback: function(value) {
                  if (Number.isInteger(value)) {
                    return value;
                  }
                }
              }
            }
          ]
        }
      }}
    />
  </Grid>
</div>;

现在，我希望Grid组件的大小是可调的，为此，我已将Grid组件的xs属性设置为状态tamano元素的值，默认情况下设置为6.当我更改选择值时，网格组件的大小会发生变化，并且我希望图形大小与网格大小一起发生变化，但是当我更改大小时，网格的大小会发生变化，但条形图形的大小不会发生变化。我该怎么解决？