[英]How can I apply styling to Material UI tabs in React?
I am trying to style my material UI tabs in my react component but I can seem to get them applied correctly.我正在尝试在我的 react 组件中设置材质 UI 选项卡的样式,但我似乎可以正确应用它们。 How can I do so?
我怎么能这样做? I would like to set the background color and box shadow of the entire bar, and and indicator background color and underline for the active tab.
我想设置整个栏的背景颜色和框阴影,以及活动选项卡的指示器背景颜色和下划线。 Thank you!
谢谢!
Here's what I have so far:这是我到目前为止所拥有的:
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.");
}
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.");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.