無法刪除邊框底部

Question

我正在嘗試自定義樣式React mui 選項卡以完成以下操作：

我試圖將框陰影設置為選定的選項卡並刪除邊框底部。 設置 box-shadow 有效，但刪除 border-bottom 沒有。 這是 styles object：

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  selected: {
    boxShadow: theme.shadows[1]
  },
  tab: {
    border: "none"
  }
});

這就是我的標簽的樣子：

   <Tab
     label="Item One"
     classes={{ selected: classes.selected, root: classes.tab }}
   />

您可以在此處查看整個示例。

我想如何刪除選定選項卡上的邊框？ 在期待控制台中的元素時，我什至看不到邊框來自哪里。

Answer 1

我剛剛找到了indicatorColor Props

<Tabs indicatorColor={""} value={value} onChange={this.handleChange}> </Tabs>

參考： https://material-ui.com/api/tabs/

Answer 2

您可以簡單地設置用於display: none; ：

<style>
  .MuiTabs-indicator {
    display: none;
  }
</style>