如何将样式应用于 React 中的 Material UI 选项卡？答案

【问题标题】：How can I apply styling to Material UI tabs in React?如何将样式应用于 React 中的 Material UI 选项卡？
【发布时间】：2021-10-14 23:27:01
【问题描述】：

我正在尝试在我的 react 组件中设置材质 UI 选项卡的样式，但我似乎可以正确应用它们。我该怎么做？我想设置整个栏的背景颜色和框阴影，以及活动选项卡的指示器背景颜色和下划线。谢谢！

这是我目前所拥有的：

const routes = ["/tab1", "/tab2"];
  
function MainNavigation() {
  const styles = {
      backgroundColor: "white",
      boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
  };

  return (
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <div className="toolbar">
              <Tabs 
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <Tab className="mat-tab"
                  label="Tab1"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></Tab>
                <Tab className="mat-tab"
                  label="Tab2"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></Tab>
              </Tabs>
             </div>
          )}
        ></Route>
 
        <Switch >
          <Route path="/scutes" component={Tab2}></Route>
          <Route path="/gateways" component={Tab1}></Route>
          <Redirect exact from="/" to="/tab2" />
        </Switch>
      </BrowserRouter>
      </IonToolbar>
  );
}

export default MainNavigation;
function handleTabChange(index: any) {
  throw new Error("Function not implemented.");
}

【问题讨论】：

您好，我在mui.com/components/tabs/#customization中找到了完整的示例，在示例中，您需要使用样式创建一个新的Tab组件，然后使用它来代替默认的“Tab”

标签： css reactjs material-ui navigation

【解决方案1】：

导入样式

import styled from "styled-components";

声明你的风格

const NewTab = styled(Tab)`
   font-size: 100px;
`

使用新元素代替默认选项卡

import styled from "styled-components";

const routes = ["/tab1", "/tab2"];

const NewTab = styled(Tab)`
   font-size: 100px;
`
  
function MainNavigation() {
  const styles = {
      backgroundColor: "white",
      boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
  };

  return (
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <div className="toolbar">
              <Tabs 
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <NewTab className="mat-tab"
                  label="Tab1"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></NewTab>
                <NewTab className="mat-tab"
                  label="Tab2"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></NewTab>
              </Tabs>
             </div>
          )}
        ></Route>
 
        <Switch >
          <Route path="/scutes" component={Tab2}></Route>
          <Route path="/gateways" component={Tab1}></Route>
          <Redirect exact from="/" to="/tab2" />
        </Switch>
      </BrowserRouter>
      </IonToolbar>
  );
}

export default MainNavigation;
function handleTabChange(index: any) {
  throw new Error("Function not implemented.");
}

【讨论】：