Я пытаюсь визуализировать диаграмму внутри компонента, но попадаю в маленькую загадку. Эта маленькая загвоздка - тег 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