I am working on a personal website using Material-UI and to make it responsive I wanted to hide an image on smaller screens but when I try to use [theme.breakpoints.down('md')], it keeps giving me the error:
TypeError: Cannot read property 'down' of undefined
I am a beginner and just can't figure out why I am getting this error. I referred to the documentation and others questions similar to this but I was not able to find any solution.
Here is my Component:
import React from 'react'
import { Grid ,Button,Box} from '#material-ui/core';
import { makeStyles } from "#material-ui/styles";
import './header.css'
import guy from '../../assets/img/peep_guy.svg'
const useStyles =makeStyles(theme=>({
root:{
marginLeft:"55px",
marginRight:"20px"
},
try_btn:{
background:"black",
textTransform:"none",
margin:"25px",
fontSize:"clamp(10px,2vw,20px)",
background:"#5338f8",
"&:hover":{
boxShadow:" 0 15px 30px -15px rgb(0 0 0 / 20%)",
background:"#5338f8",
},
},
boy_img:{
paddingTop:"12px",
[theme.breakpoints.down('md')]: {
display:"none"
},
}
}))
function Header() {
const {try_btn,boy_img,root} =useStyles();
return (
<div>
<Box m={5}>
<Box ml={4} />
<Grid container spacing={0} className={root}>
<Grid item lg={8} md={9} align="right">
<h1 className="heading">Don't spend $15,000 on a coding bootcamp</h1>
<h2 className="sub_head">Our career path helps motivated students become hireable frontend developers for 1% of the cost</h2>
<Button className={try_btn} color="secondary" variant="contained">Try it out now</Button>
</Grid>
<Grid item lg={3} md={2} xs={0} sm={0}>
<Box pt={3} />
<img className={boy_img} style={{transform:"scaleX(-1)"}} src={guy} alt=""/>
</Grid>
</Grid>
</Box>
</div>
)
}
export default Header
Replace
import { makeStyles } from "#material-ui/styles";
with
import { makeStyles } from "#material-ui/core/styles";
makeStyles from "#material-ui/core/styles" is a wrapper hook of the other one. This wrapper add a default theme if you don't provide one in ThemeProvider. Source.
Related
This might have a quick answer. I am starting to learn Material UI and want try its grid examples, but coding below mentions that compilation rejects as NOTFOUND .. Could not locate a CSS file to load to try these examples.. Without the className parameter, i do not see any outline of the GRID, so may be these css 'classes.root' hold the formatting options. Appreciate your kind help,
function App() {
return (
<div className={classes.root}> ????
<Grid container spacing={3}>
<Grid item xs={12}>
You need to use makeStyles
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
root: {
backgroundColor: 'red',
color: props => props.color,
},
});
function App(props) {
const classes = useStyles(props);
return (
<div className={classes.root}>
// ...
</div>
);
}
I am using React cards to show dynamic cards. I wanted to show 4 cards for desktop view at one row and 1 card for the mobile view but it is always coming vertically no cards are shown horizontally
The Container Component Of The card
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<div>
{popular.map((post) =>
<div key={post.etag}>
{
<CardDeck style={{display: 'flex', flexDirection: 'row',justifyContent: 'right'}}>
<SongCard
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</CardDeck>
}
</div>)
}
</div>
)
}
export default Popular
And the card component is
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<div>
<Card style={{maxWidth:'30em',flex: '1'}}>
<CardImg top width="100%" src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
</div>
)
}
export default SongCard
First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.
Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.
I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<CardDeck>
{popular.map((post) =>
<SongCard
key={post.etag}
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</div>)
}
</CardDeck>
)
}
export default Popular
And
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<Card>
<CardImg top src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
)
}
export default SongCard
Good day, im attempting to add custom CSS to a material UI App Bar but all the styles i apply using the makeStyles function is overridden by the default Material UI styling. The only fix is to apply !important to my styling but I dont see this as a viable workaround. Following the docs it states to use the StylesProvider component to configure the CSS injection order but this also hasnt proven any results. Please any help will be greatly appreciated here is an example of what ive attempted to do.
Index.js
import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'typeface-roboto';
import { StylesProvider } from '#material-ui/core/styles';
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
} else {
render(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
}
serviceWorker.unregister();
Component that uses MakeStyles
const navBarStyles = makeStyles((theme) => ({
link: {
margin: theme.spacing(1, 1.5)
}
}));
export default function NavbarComponent() {
const classes = navBarStyles();
return (
<AppBar position="static" elevation={0}>
<Toolbar className="flex-wrap">
<Typography variant="h6" color="inherit" noWrap className="flex-grow-1">
test
</Typography>
<nav>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Features
</Link>
</nav>
</ToolBar>
</AppBar>
)}
Note im using React-Snap with this project so im not sure if that is the reason it is breaking, https://www.npmjs.com/package/react-snap
You can override the MUI styles using theme provider
check theme provider
Or can use classes property in Mui Component. classes
Use sx={{}} property directly in the navbar.
Something like this
<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}>
//Other components
</AppBar>
I am trying to use styled-components to style my own child components.
As an example, I have created a custom card component, called myCard, as follows:
import React from "react";
import Card, { CardActions, CardContent } from "material-ui/Card";
import Button from "material-ui/Button";
import Typography from "material-ui/Typography";
const myCard = props => {
return (
<Card>
<CardContent>
<Typography>{props.cardName}</Typography>
</CardContent>
<CardActions>
<Button size="small">SELECT</Button>
</CardActions>
</Card>
);
};
export default myCard;
Now, in the parent component, I want to reuse this myCard component but with the possibility of giving any one of them a custom style, such as a border (when I eventually refactor the code to onClick):
import React, { Component } from "react";
import Grid from "material-ui/Grid";
import styled from "styled-components";
import myCard from "./myCard";
const StyledCard = styled(myCard)`
/* border-style: ${props => (props.border ? "solid" : "none")}; */
border-style: solid !important;
border-width: 5px;
width: 180px;
`;
class cardSelect extends Component {
render() {
return (
<div>
<Grid container spacing={24}>
<Grid item xs={12}>
<Grid container justify="center">
<Grid item>
<StyledCard
cardName="Bronze"
/>
</Grid>
<Grid item>
<StyledCard
cardName="Silver"
/>
</Grid>
<Grid item>
<StyledCard
cardName="Gold"
/>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
);
}
}
export default cardSelect;
I admit, I find the styled-components documentation rather poor. And there is only one reference to this kind of situation, which suggests to pass the className prop to the component. However I am not truly understanding this concept.
So you really need to pass className prop to the Card component. The styled-components generates classes for you, to apply styles for not-styled-components just needs to pass className prop to the component...
const myCard = props => {
return (
<Card className={props.className}>
<CardContent>
<Typography>{props.cardName}</Typography>
</CardContent>
<CardActions>
<Button size="small">SELECT</Button>
</CardActions>
</Card>
);
};
Pass props with notations to your {...props} Card component.
import React from "react";
import Card, { CardActions, CardContent } from "material-ui/Card";
import Button from "material-ui/Button";
import Typography from "material-ui/Typography";
const myCard = props => {
return (
/**Here, pass the props with spread notation */
<Card {...props}>
<CardContent>
<Typography>{props.cardName}</Typography>
</CardContent>
<CardActions>
<Button size="small">SELECT</Button>
</CardActions>
</Card>
);
};
export default myCard;
So actually, what does this spread props do when you pass any prop to the component it will become part of the component.
I found the answer through trials and errors. Could not find this solution (at least holistic) anywhere, so for posterity and the benefit of others, this is how I solved it.
The solution is simply to pass the className prop to the myCard component as follows:
const myCard = props => {
const { className } = props;
return (
<Card className={className}>
...
So, in general, one has to pass the className prop on to the custom component that you want to render.
I am trying to do a horizontal menu with ReactJS and Material UI, but I have the following problem: My menu shows correctly, in horizontal, but it is not responsive. When I change the size of the page in the browser, my menu continues to have the same size like before. It only updates its size when I reload with F5.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
const style = {
display: 'inline-block',
margin: '0 32px 16px 0',
width: '100%'
};
const styleq = {
display: 'inline',
float: 'left',
width: '25%'
};
export default class MenuAlumno extends React.Component {
render() {
return (
<div>
<AppBar
title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -</span>}
onTitleTouchTap={this.handleTouchTap}
titleStyle={STYLES.titleStyle}
iconElementLeft={this.state.drawerOpen ? <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
onLeftIconButtonTouchTap={this.controlMenu}
/>
<Paper style={style}>
<Menu>
<MenuItem primaryText="Maps" style={styleq}/>
<MenuItem primaryText="Books" style={styleq}/>
<MenuItem primaryText="Flights" style={styleq} />
<MenuItem primaryText="Apps" style={styleq} />
</Menu>
</Paper>
</div>
);
}
}
I had this same question and it has been driving me crazy! lol. I love MUI, but sometimes all the nesting can make things really difficult...
Anyway, this worked for me. Keep your MenuItems as they are and change your Menu props to this:
<Menu autoWidth={false} width="100%" listStyle={{width: '0.01%'}} style={{width:'100%'}}>
You probably have an element with a fixed width.
Is there a URL where to see it working or something that could help me understand what's going on? It's hard just from what you wrote.
UPDATE
When you use the Menu component, set the "autoWidth" props to "false".
As you can see from the code, the default is "true" that will force a width for the menu.
<Menu autoWidth={false}>