Material-UI导航、抽屉和Flex

Question

我试图在一个组件中呈现一个重图表，但是遇到了一个小问题。这个小问题是一个flex标签，它似乎是我问题的根源。我遇到的问题是，我对css的了解还不够多，无法想出解决办法。

在我的导航风格中，我有一个display: flex。我的组件中也有一个display: flex。由于这种冲突，我的组件的图表不会响应页面的缩小，而是根据需要进行扩展。如果我从我的组件中删除display: flex，问题仍然存在，但是如果我在我的组件中维护display: flex，并从nav中删除它，图表会根据需要做出响应，但是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

Answer 1

事实证明，我不得不在组件中硬编码更多的宽度，同时添加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",
  },
}))