hello my friends im wana make reponsive web with matreial ui but in tablte size have problem
this case im show all device but my problem in tablet responsive
i need help to fix them if can chnage code and seend me
desktop
Mobile
bug tablete
for examp this is my leftSide style
container:{
paddingTop:theme.spacing(10),
backgroundColor:theme.palette.primary.main,
height:"100vh",
color:"white",
[theme.breakpoints.up("sm")]:{
backgroundColor:"white",
color:'#555',
border:"1px solid #999"
},
position:'sticky',
top:0
},
item:{
display:'flex',
alignItems:'center',
marginBottom:theme.spacing(4),
[theme.breakpoints.up("sm")]:{
marginBottom:theme.spacing(3),
cursor:"pointer",
}
},
icon:{
marginRight:theme.spacing(1),
[theme.breakpoints.up("sm")]:{
fontSize: "18px"
}
},
text:{
fontFamily:"vazir !important",
fontWeight:100,
[theme.breakpoints.up("sm")]:{
display:'block'
},
[theme.breakpoints.down("sm")]:{
display:"none"
},
}
And this is my Layout
import { Grid } from "#mui/material";
import React from "react";
import Leftbar from "../components/Leftbar";
import Navbar from "../components/Navbar";
import Feed from "../components/Feed";
import Rightbar from "../components/Rightbar";
import useStyle from "./style/main";
import Add from "../components/Add";
function Layout() {
const classes = useStyle();
return (
<div>
<Navbar />
<Grid container>
<Grid item sm={2} xs={2}>
<Leftbar />
</Grid>
<Grid item sm={7} xs={10}>
<Feed />
</Grid>
<Grid item sm={3} className={classes.right}>
<Rightbar />
</Grid>
</Grid>
<Add />
</div>
);
}
export default Layout;
Related
Hi I was reproducing a MERN project to create a social app.
When I use materail-ui/core everything work fine, but I got in console.log this warning :
deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:
My container balise works fine but i got a warning about that too.(See the image).
here is my code :
import { Container, AppBar, Typography, Grow, Grid } from "#material-ui/core";
// this method is deprecated
import memories from "./components/images/memories.png";
// la route de l'image se trouve dans components
import Posts from "./components/Posts/Posts.js";
import Form from "./components/Form/Form.js";
// .js a la fin ??
function App() {
return (
// <div>yo</div>
<div>
<Container maxidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
<img src={memories} alt="memories" height="60" />
</Typography>
</AppBar>
<Grow in>
<Container>
<Grid
container
justifyContent="space-between"
alignItems="stretch"
spacing={3}
>
{/* grid pour les devices grandeur des telephoens */}
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={4}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
</div>
);
}
export default App;
So is this really deprecated because it's seems to work fine for me ?
I imported #material-ui/core, #devexpress/dx-react-core #devexpress/dx-react-grid and some other modules but issue is not resolving.
My App.js code:
import Grid from '#material-ui/core/Grid';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</div>
);
}
export default App;
Actually definition is not there. Just place this before App() function:
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
It will work.
The problem is that the example provided for the Grid component is a bit misleading. I just had exactly the same trouble with the Stack component, which suffers from the same problem.
If you use the example code as-is, it gives exactly this error because it includes Item elements. This gives the impression that each of your code fragments in the control needs to be wrapped in an Item element. Unfortunately, there is no such thing (unless you happen to define one).
So the solution is simply to exclude the Item elements:
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
</Grid>
</div>
);
This example "Image avatars" https://material-ui.com/demos/avatars/ comes from material-ui v3.2.0 website but somehow I can't see the image when I implement.
Why I can't see image in the example of material -ui-v3.2.0 "Image
avatars "?
In the examples 'icon avatars' and 'Letter avatars' I can see the image. I use the create-react-app 'react-scripts': '^2.0.4', but also tried on 'react-scripts': '^1.1.5' but nothing works.
PFB below code:
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '#material-ui/core/styles';
import Avatar from '#material-ui/core/Avatar';
const styles = {
row: {
display: 'flex',
justifyContent: 'center',
},
avatar: {
margin: 10,
},
bigAvatar: {
width: 60,
height: 60,
},
};
function ImageAvatars(props) {
const { classes } = props;
return (
<div className={classes.row}>
<Avatar alt="Remy Sharp" src="/static/images/remy.jpg" className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src="/static/images/uxceo-128.jpg"
className={classNames(classes.avatar, classes.bigAvatar)}
/>
</div>
);
}
ImageAvatars.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ImageAvatars);
You need to import it. Just passing path directly to src won't work. Below are two ways to render images in react
Using import
import uxceo from "/static/images/uxceo-128.jpg";
import remy from "/static/images/remy.jpg";
<Avatar alt="Remy Sharp" src={remy} className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src={uxceo}
className={classNames(classes.avatar, classes.bigAvatar)}
/>
OR Using require
<Avatar alt="Remy Sharp" src={require("/static/images/remy.jpg")} className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src={require("/static/images/uxceo-128.jpg")}
className={classNames(classes.avatar, classes.bigAvatar)}
/>
This example comes from material-ui-next website but somehow I can't see the image which is the "lizard image" when I try to run it on my computer.
Why can see the image? I got no error in my console and the "simple card" example in the website is working to me but not the one with image like "Lizard". (I think my error is in the path of image or src of image)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const styles = {
card: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
};
function SimpleMediaCard(props) {
const { classes } = props;
return (
<div>
<Card className={classes.card}>
<CardMedia
className={classes.media}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
}
SimpleMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleMediaCard);
Now i know, I change the path of Image to
import logo from './lizard.jpg';
<CardMedia
className={classes.media}
image={logo}
title="Contemplative Reptile"
/>
If you are using some url to image, you probably have to use img component and give its path in src.
<CardMedia
component="img"
src={url}
/>
I have a React application where if I change the route to a page with a small height the entire body doesn't have a max height for the window (the html does have full height).
I have a standard index.html setup here
<html>
<body>
<div id="app"></div>
<script src="client.min.js"></script>
</body>
</html>
Then here's my App.js file:
import React from "react"
import ReactDOM from "react-dom"
import {Router, hashHistory} from "react-router"
import routes from "./Routes"
const app = document.getElementById('app')
ReactDOM.render((
<Router history={hashHistory} routes={routes()}>
</Router>
), app)
And here's my Routes.js file:
import React from "react"
import {Route, IndexRoute} from "react-router"
import Layout from "./Layout"
import About from "./pages/About"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Register from "./pages/Register"
import SignIn from "./pages/SignIn"
import Terms from "./pages/Terms"
export default() => {
return (
<Route name="root" path="/" component={Layout}>
<IndexRoute component={Home}/>
<Route path="/about" component={About}/>
<Route path="/signin" component={SignIn}/>
<Route path="/register" component={Register}/>
<Route path="/terms" component={Terms}/>
<Route path="*" component={NotFound}/>
</Route>
)
}
Finally here's my Layout.js:
import React from "react"
import ReactDOM from "react"
import DevTool from 'mobx-react-devtools'
import Control from "./components/layout/Control"
import Footer from "./components/layout/Footer"
import Header from "./components/layout/Header"
import Sidebar from "./components/layout/Sidebar"
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div className="wrapper">
<DevTool /> {/* Remove for PRODUCTION */}
<Header />
<Sidebar />
{this.props.children}
<Footer />
<Control />
<div className="control-sidebar-bg"></div>
</div>
)
}
}
All my routes go to pages with very little content so it doesn't cover the full page. In every case the entire body height wraps to the height of the content while the html remains 100% of with window.
I've tried debugging on everything. There's no padding or margin on the body or html rendered by inspecting the elements. I've also tried adding height and min-height 100% attributes to the body tags with inline styling and still didn't get any decent results.
The page automatically fixes itself as soon as the window resizes or I reload the page but that eliminates a lot of the reason to why I am using React.
Any ideas on what could fix this?
I managed to get a fix, this is quite a specific problem (which I've gather from the lack of response). But in-case anyone else stumbled across a problem like this.
All of my pages components had the following render:
export default class About extends React.Component {
render() {
return (
<div className="content-wrapper">
{/* All my about code goes in here */}
</div>
)
}
}
I ended up removing the content-wrapper classNames from all the page container dividers and did the following to the Layout page:
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div className="wrapper">
<DevTool /> {/* Remove for PRODUCTION */}
<Header />
<Sidebar />
<div className="content-wrapper">
{this.props.children}
</div>
<Footer />
<Control />
<div className="control-sidebar-bg"></div>
</div>
)
}
}
This solved all my problems :)