Регулировка высоты панели инструментов для таблицы материалов

Question

Помеченная синим цветом область занимает много места. Как я могу отрегулировать высоту панели инструментов? Можете показать на примере?

Или как мне создать файл css и импортировать его на панель инструментов. Мне нужно изменить высоту, я не мог изменить то, что я сделал. пожалуйста, можете ли вы помочь с этим?

Практически нет метода, который я не пробовал. Короче говоря, я хочу настроить высоту поля Mtabletoolbar, отмеченного синим.

 <MaterialTable
 Toolbar: props => (
          <div style={{ backgroundColor: 'blue', }}>
            <MTableToolbar {...props} classes={{ customizeToolbar: "15px" }} />
          </div>
        ),
 />

`

  const styles = {
    customizeToolbar: {
      minHeight: "100px"
    }
  }

`

Я пытался в течение 2 дней, пожалуйста, вы можете помочь с этим вопросом? Мне нужно изменить структуру стиля ниже. особенно я должен изменить минимальную высоту

 .MuiToolbar-regular {
    min-height: 64px;
 }

`

  .MuiToolbar-root {
    display: flex;
    position: relative;
    align-items: center;
  }
  .MuiToolbar-regular {
    min-height: 56px;
  }
   @media (min-width:0px) and (orientation: landscape) {
    .MuiToolbar-regular {
      min-height: 48px;
    }
  }
  @media (min-width:600px) {
     .MuiToolbar-regular {
      min-height: 64px;
    }
   }
  .MuiToolbar-dense {
    min-height: 48px;
  }

`

Answer 1

Просто настройте стиль элемента, где появляется blue,

и сделайте дочерний вертикальный центр, как показано ниже:

<div
  style={{
    backgroundColor: "lightblue",
    height: "200px",
    display: "flex",
    alignItems: "center"
  }}
>
  <MTableToolbar {...props} />
</div>