我正试图在组件中进行重新绘制，但遇到了一个小问题。这个小问题是一个flex标签，它似乎是我问题的根源。我遇到的问题是，我对css的了解不够，无法找到解决方法。
在我的导航风格中，我有一个display: flex。我的组件中还有一个display: flex。由于这种冲突，我的组件图表不会对页面收缩做出响应，而是根据需要进行扩展。如果我从组件中删除display: flex，问题仍然存在，但如果我在组件中保留display: flex并将其从导航中删除，则图表会根据需要做出响应，但导航无法正确呈现。有办法绕过这个吗？
此外，如果您需要更多信息，请告诉我！
Nav
// React Libraries
import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import './App.css';
// My Componants
import Landing from './dataEntry/Landing';
import DataView from './dataEntry/dataView'
import FormHandler from './dataEntry/FormHandler'
import CompareTool from './dataEntry/data_comparison_tool/DataCompare.js'
// Material Core
import { fade, makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import InputBase from '@material-ui/core/InputBase';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import Button from '@material-ui/core/Button';
// Icons
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
const drawerWidth = 240;
const useStyles = makeStyles(theme => ({
root: {
display: 'flex', <---- if I remove this it fixes the issue but the nav doesn't render properly
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
// Menu Styles
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
United State Climate Alliance
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.toolbar} />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<BrowserRouter>
<Switch>
<Route exact path='/data-portal/:stateName/data/' component={DataView}/>
<Route exact path='/data-portal/:stateName/data/create' component={FormHandler}/>
<Route exact path='/data-portal/:stateName/data/:slug/edit' component={FormHandler}/>
<Route exact path='/data-portal/:stateName/data/:slug' component={FormHandler}/>
<Route exact path='/data-portal/data-comparison-tool' component={CompareTool}/>
<Route exact path='/data-portal/testing' component={BaseLayout2}/>
<Route exact path='/data-portal/' component={Landing}/>
</Switch>
</BrowserRouter>
</main>
</div>
);
}
组件
import React, { Component } from 'react';
// Material-UI
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button'
import ButtonGroup from '@material-ui/core/ButtonGroup'
import IconButton from '@material-ui/core/IconButton';
import AutorenewRoundedIcon from '@material-ui/icons/AutorenewRounded';
import Typography from '@material-ui/core/Typography';
import { useTheme } from "@material-ui/styles";
// My Componants
import LineViz2 from "../viz/LineViz2.js"
import theme from "../UI/theme"
const useStyles = makeStyles(() => ({
container: {
padding: theme.spacing(1),
},
horizontalPaper: {
margin: theme.spacing(1),
padding: theme.spacing(2),
},
verticalPaper: {
margin: theme.spacing(1),
padding: theme.spacing(2),
display: "flex", <---- If I remove this but don't remove the other nothing happens
overflow: "hidden",
flexDirection: "column",
alignItems: "center",
},
}))
const DataCompareInline = (props) => {
const classes = useStyles()
const {lineVizData} = props;
const {stateName} = props;
const {source} = props;
const {states} = props;
const {vizKey} = props;
return (
<Grid container className={classes.container}>
<Grid item xs={12} md={12} lg={12}>
<Paper className={classes.verticalPaper} alignItems="flex-start">
<LineViz2
data={lineVizData}
state={stateName}
source='compareTool'
states={states}
vizKey={vizKey}
aspectRatio={3}
/>
</Paper>
</Grid>
</Grid>
)}
export default DataCompareInline
LineViz
import React from "react"
import PropTypes from "prop-types"
import {
CartesianGrid,
XAxis,
YAxis,
Tooltip,
Legend,
ResponsiveContainer,
LineChart,
Line,
} from "recharts"
import {Typography, useMediaQuery} from "@material-ui/core"
import {useTheme} from "@material-ui/core/styles"
import moment from "moment"
const LineViz2 = (props) => {
const data = props.data;
const {stateName} = props;
const {source} = props;
const {aspectRatio} = props;
const theme = useTheme()
const breakpointsSmDown = useMediaQuery(theme.breakpoints.down("sm"))
const aspect = breakpointsSmDown ? 0.8 : aspectRatio
return (
<ResponsiveContainer width="100%" aspect={aspect}>
<LineChart
data={data.reverse()}
margin={{ top: 5, right: 35, left: 0, bottom: 5 }} >
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="year" />
<YAxis/>
<Tooltip />
<Legend />
<Line type="monotone" dataKey={props.vizKey[0]} stroke="#ff6b6b" activeDot={{ r: 8 }} strokeWidth={3}/>
</LineChart>
</ResponsiveContainer>
)
}
export default LineViz2
事实证明，在添加position的同时，我不得不在组件中对宽度进行更多的硬编码。
const useStyles = makeStyles(() => ({
container: {
padding: theme.spacing(1),
},
horizontalPaper: {
margin: theme.spacing(1),
padding: theme.spacing(2),
},
verticalCardLineViz: {
margin: theme.spacing(1),
padding: theme.spacing(2),
position: 'absolute',
width: 'calc(100% - 322px)',
height: '400px',
display: 'flex',
overflow: "hidden",
flexDirection: "column",
alignItems: "center",
},
}))