React原生底部选项卡栏样式添加凹凸

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f5f5f5;
  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); /* 添加底部阴影效果 */
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
}

.tab-item.active {
  background-color: #ffffff;
  border-top-left-radius: 10px; /* 添加左上角圆角效果 */
  border-top-right-radius: 10px; /* 添加右上角圆角效果 */
  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); /* 添加底部阴影效果 */
}

render() {
  return (
    <div className="tab-bar">
      <div className={`tab-item ${activeTab === 'tab1' ? 'active' : ''}`}>
        Tab 1
      </div>
      <div className={`tab-item ${activeTab === 'tab2' ? 'active' : ''}`}>
        Tab 2
      </div>
      <div className={`tab-item ${activeTab === 'tab3' ? 'active' : ''}`}>
        Tab 3
      </div>
    </div>
  );
}