在 React 中使用 MUI 库后的媒体查询问题

Question

过去几个小时我一直在挠我的。对于我的项目，我需要使用一个反应库来设计我的狗应用程序。我使用了 MUI 库，它非常适合网格布局，但问题是我似乎无法创建任何媒体查询或断点，除非我遗漏了一些重要的东西。

我已经阅读了 MUI 的断点文档，但我似乎无法实现它，而且我的 css 媒体查询似乎没有按照我想要的方式改变布局，这是本质上是在 780px 处创建一个断点，并将布局转换为单列。

如有任何帮助，我们将不胜感激

App.js

import './App.css';
import './Dog.js';
import './index.css';
import "./Grid.js";
import NestedGrid from './Grid.js';
import "./Resize.js";


function DogApp() {

  return (
    <div className="dogApp">
      <div className ="fixThis">
        <NestedGrid />
      </div>
    </div>

  );
}

export default DogApp;

FetchAPI.js

import React, { useState, useEffect } from 'react'


const FetchAPI = () => {

    const [show, setShow] = useState({});
    const [data, setData] = useState([]);

    const apiGet = () => {
        const API_KEY = "";
        fetch(`https://api.thedogapi.com/v1/images/search?limit=2&page=10&order=Desc?API_KEY=${API_KEY}`)
            .then((response) => response.json())
            .then((json) => {
                console.log(json);
                setData([...data, ...json]);
            });
    };

    useEffect(() => {           //call data when pagee refreshes/initially loads 
        apiGet();
    }, []);

    return (

        <div>
            {data.map((item, id) => (
                <div class="dog">
                    <img alt="dog photos" class="dogImg" src={item.url}></img>
                    {show[id] === false ? <p>{JSON.stringify(item.breeds)}</p> : null}
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: false }))}>Learn more about this dog!</button>
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: true }))}>Hide information</button>

                </div>

            ))}
        </div>

    )
}

export default FetchAPI;

Grid.js

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import FetchAPI from './FetchAPI';

const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
    ...theme.typography.body2,
    padding: theme.spacing(4),
    textAlign: 'center',
    color: theme.palette.text.secondary,

}));


function FormRow() {
    return (
        <React.Fragment>
            
            <Grid item xs={4}>
                <Item>
                    <FetchAPI />
                </Item>
            </Grid>
            <Grid item xs={4}>
                <Item>
                    <FetchAPI />
                </Item>
            </Grid>
            <Grid item xs={4}>
                <Item>
                    <FetchAPI />\
                    
                </Item>
            </Grid>
            
        </React.Fragment>
    );
}

export default function NestedGrid() {
    return (
        
        <Box sx={{ flexGrow: 1 }}>
            <Grid container spacing={1}>
                <Grid container item spacing={3}>
                    <FormRow />
                </Grid>
                <Grid container item spacing={3}>
                    <FormRow />
                </Grid>
                <Grid container item spacing={3}>
                    <FormRow />
                </Grid>
            </Grid>
        </Box>
    );
}

index.css

* {
  margin : 0;
  padding :0;
  box-sizing: border-box;
}

.idDog{
  font-size: 1.5rem;
  
}

.flexOne{
  display: flex;
  flex-direction: row !important;
  width: 50%;
}

.reSizeImage{
  width: 25%;
  height: 25%;
  padding: 10px;
}

.dogImg{
  width: 650px;
  height: 30vh;
  place-content: center;
  object-fit: cover;
}

.flexTwo{
  text-align: center;
  
}

button{
  font-size: 1.2rem;
  font-weight: bolder;
  padding: 10px;
  border-radius: 20px;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  height: 2.5vh;
  display: grid;
  place-items: center;
  margin: 0 auto;
  background-color: rgb(223, 217, 217);

}




@media screen and (max-width: 780px){
  .dogApp {
    display: flex !important;
    flex-direction: column !important;
  }

   .fixThis{
    flex-direction: column !important;

   }
}

Answer 1

我最终使用现成的模板来解决我的问题

Grid.js

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
import CameraIcon from '@mui/icons-material/PhotoCamera';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import { createTheme, ThemeProvider } from '@mui/material/styles';

function Copyright() {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const theme = createTheme();

export default function Album() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppBar position="relative">
        <Toolbar>
          <CameraIcon sx={{ mr: 2 }} />
          <Typography variant="h6" color="inherit" noWrap>
            Album layout
          </Typography>
        </Toolbar>
      </AppBar>
      <main>
        {/* Hero unit */}
        <Box
          sx={{
            bgcolor: 'background.paper',
            pt: 8,
            pb: 6,
          }}
        >
          <Container maxWidth="sm">
            <Typography
              component="h1"
              variant="h2"
              align="center"
              color="text.primary"
              gutterBottom
            >
              Album layout
            </Typography>
            <Typography variant="h5" align="center" color="text.secondary" paragraph>
              Something short and leading about the collection below—its contents,
              the creator, etc. Make it short and sweet, but not too short so folks
              don&apos;t simply skip over it entirely.
            </Typography>
            <Stack
              sx={{ pt: 4 }}
              direction="row"
              spacing={2}
              justifyContent="center"
            >
              <Button variant="contained">Main call to action</Button>
              <Button variant="outlined">Secondary action</Button>
            </Stack>
          </Container>
        </Box>
        <Container sx={{ py: 8 }} maxWidth="md">
          {/* End hero unit */}
          <Grid container spacing={4}>
            {cards.map((card) => (
              <Grid item key={card} xs={12} sm={6} md={4}>
                <Card
                  sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
                >
                  <CardMedia
                    component="img"
                    sx={{
                      // 16:9
                      pt: '56.25%',
                    }}
                    image="https://source.unsplash.com/random"
                    alt="random"
                  />
                  <CardContent sx={{ flexGrow: 1 }}>
                    <Typography gutterBottom variant="h5" component="h2">
                      Heading
                    </Typography>
                    <Typography>
                      This is a media card. You can use this section to describe the
                      content.
                    </Typography>
                  </CardContent>
                  <CardActions>
                    <Button size="small">View</Button>
                    <Button size="small">Edit</Button>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Container>
      </main>
      {/* Footer */}
      <Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer">
        <Typography variant="h6" align="center" gutterBottom>
          Footer
        </Typography>
        <Typography
          variant="subtitle1"
          align="center"
          color="text.secondary"
          component="p"
        >
          Something here to give the footer a purpose!
        </Typography>
        <Copyright />
      </Box>
      {/* End footer */}
    </ThemeProvider>
  );
}

在 React 中使用 MUI 库后的媒体查询问题

Media Query Issues after Using MUI Library in React

javascript

css

reactjs

material-ui