如何更改react导航底部选项卡栏中的标高？

import React from 'react';
import './TabBar.css'; // 导入样式文件

class TabBar extends React.Component {
  render() {
    return (
      <div className="tab-bar">
        <div className="tab">选项卡1</div>
        <div className="tab">选项卡2</div>
        <div className="tab">选项卡3</div>
      </div>
    );
  }
}

export default TabBar;

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f0f0f0;
}

.tab {
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 修改box-shadow属性来改变标高效果 */
}

.tab:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}