如何解决单击时无法删除材料用户界面appBar中的边距并更改菜单项的外观
我正在使用react&material ui创建一个内容网站。在抽屉组件内部,我包含了一个appBar。一切正常。但我想在外观和功能上做些微改动。我不能做以下两件事,
- 删除appBar周围的边距
- 单击时更改菜单按钮的外观。
页面的当前状态如下,
submenu.js
import React,{Fragment,useCallback,useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import {Link} from "react-router-dom";
import ListItemText from "@material-ui/core/ListItemText";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import Toolbar from "@material-ui/core/Toolbar";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,width: '100%',backgroundColor: theme.palette.background.paper,},appBar: {
shadowColor: '#206a5d',zIndex: theme.zIndex.drawer,transition: theme.transitions.create(['width','margin'],{
easing: theme.transitions.easing.sharp,duration: theme.transitions.duration.leavingScreen,}),}));
export function Submenu({items,header}) {
const classes = useStyles();
const [selected,setSelected] = useState(false);
const clickHandler = useCallback(
() => {
setSelected(!selected)
},[selected],);
return (
<Fragment>
<div className={classes.root}>
<AppBar position="sticky"
color="inherit"
className={classes.appBar}
style={{margin: 0}}
>
<Typography style={{marginLeft: '1.5rem'}}>
<h1 style={{color:'#1f4068'}}>{header}</h1>
</Typography>
<div style={{display: 'flex'}}>
{items.map(item =>
<ListItem button
dense
key={item.title}
component={Link}
to={item.to || '/404'}
style={{padding:'0.25rem',textAlign: 'center',}}
>
<ListItemText primary={item.title} />
</ListItem>
)}
</div>
</AppBar>
</div>
</Fragment>
);
}
Technical.js
import React,{Fragment} from "react";
import {Submenu} from "../submenu";
import {TechIntro} from "./Introduction";
import {TheDowTheory} from "./DowTheory";
import {Charts} from "./Charts";
import {Trends} from "./Trendlines";
import {Support} from "./Support";
import {Indicators} from "./Indicators";
import {TechRoutes} from "./TechRoutes";
import {makeStyles} from "@material-ui/core/styles";
import {BrowserRouter as Router} from "react-router-dom";
const useStyles = makeStyles((theme) => ({
toolbar: {
display: 'flex',alignItems: 'center',justifyContent: 'flex-end',padding: theme.spacing(0,1),// necessary for content to be below app bar
...theme.mixins.toolbar,content: {
flexGrow: 1,padding: theme.spacing(3),}));
const menu = [
{
title: 'Introduction',to: '/technical',component: TechIntro
},{
title: 'The Dow Theory',to: '/thedowtheory',component: TheDowTheory
},{
title: 'Chart Patterns',to: '/chart',component: Charts
},{
title: 'Trend Lines',to: '/trends',component: Trends
},{
title: 'Support/Resistance',to: '/support',component: Support
},{
title: 'Technical Indicators',component: Indicators,to: '/indicators'
},{
title: 'Fibonacci',component: 'Fibonacci',to: '/fibonacci'
},{
title: 'Risk Management',component: 'Risk',to: '/risk'
},]
export const Technical = () => {
const classes = useStyles()
return (
<Fragment>
<Router>
<Submenu items={menu} header={'Technical Analysis'} />
<TechRoutes />
</Router>
</Fragment>
)
}
TechRoutes.js
import React from "react";
import {Switch,Route,Redirect} from "react-router-dom";
import {TheDowTheory} from "./DowTheory";
import {TechIntro} from "./Introduction";
import {Charts} from "./Charts";
import {Trends} from "./Trendlines";
import {Support} from "./Support";
import {Indicators} from "./Indicators";
export const TechRoutes = () => {
return (
<Switch>
<Route path="/technical" component={TechIntro} />
<Route path="/thedowtheory" component={TheDowTheory} />
<Route path="/chart" component={Charts} />
<Route path="/trends" component={Trends} />
<Route path="/support" component={Support} />
<Route path="/indicators" component={Indicators} />
{/*<Route path="/404" component={NotFound} />*/}
<Redirect to="/404" />
</Switch>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。