I'm trying to make sense of how to inject styles into component with MaterialUI and I'm very confused! Can anyone please explain what I did wrong? i read the documentation but it honestly didn't make sense to me. What are classes? And how do I attach the const style into the component BeerList?
My code threw an error "Cannot read property of classes undefined. I know I must have pulled from the wrong props. But I don't know how to fix it...
import React from 'react';
import BeerListItem from './BeerListItem';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import GridList from '#material-ui/core/GridList';
import GridListTile from '#material-ui/core/GridListTile';
import GridListTileBar from '#material-ui/core/GridListTileBar';
import IconButton from '#material-ui/core/IconButton';
import StarBorderIcon from '#material-ui/icons/StarBorder';
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
gridList: {
width: '100%',
height: '100%',
transform: 'translateZ(0)',
},
titleBar: {
background:
'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)'
},
icon: {
color: 'white',
},
});
const BeerList = ({beers}) =>{
const {classes} = beers;
const beerItems = beers.map((beer) => {
return <BeerListItem key={beer.id} beer = {beer}/>
});
return (<div className={classes.root} >
<GridList cellHeight={250} spacing={1} >
{beerItems}
</GridList>
</div>);
};
export default withStyles(styles)(BeerList);
classes distructured from props.
you need a little change on your components like:
const BeerList = (props) =>{
const {classes, beers} = props;
// rest of your code
return <div className={classes.root} >
<GridList cellHeight={250} spacing={1} >
{beerItems}
</GridList>
</div>
};
That's it.
Related
I want to override the MuiBox-root style for the whole application.According to the official documentation I need to identify the class:
And among other things I can override it:
But if I proceed this way, it just removes the styling. What am I doing wrong here?
This will do:
import { withStyles } from "#material-ui/core/styles";
const styles = {
root: {
padding: "10px"
}
};
function App({ classes }) {
return <yourelement className={classes.root}>xyz...<yourelement/>;
}
export default withStyles(styles)(App);
You can use the sx property on the Box component. For example:
<Box sx={{ padding: "10px" }}>
<YourChildComponents/>
</Box>
Lets say aim is to override background css field of root background css field.
Below are the steps
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},
});
export default function testFunction() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}
Hope this will help.
I have successfully increased the Label in the TextField of my React app.
My problem is that when its on shrink, it just overlaps some line on its right.
Click Here
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputLabel-shrink": {
fontSize: "24px"
}
}
}));
export default function CustomTextField({ InputLabelProps = {}, ...props }) {
const classes = useStyles();
return <TextField {...props} className={classes.root} />;
}
I would encourage you to always use the DevTools when it comes to applying customizations. The size of the gap it determined by the <legend> element:
The element's font size has a font-size: 0.75em to account for the CSS transformation.
So you can simply apply the same font size to its parent:
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputLabel-shrink, & fieldset": {
fontSize: "24px"
}
}
}));
export default function CustomTextField({ InputLabelProps = {}, ...props }) {
const classes = useStyles();
return <TextField {...props} className={classes.root} />;
}
https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-g5co7?file=/src/CustomTextField.js
You should use the Shrink as prop for TextField
Remove fontSize: "24px" let it resize by Material-UI
Make sure your TextField as:
<TextField InputLabelProps={{shrink: true}} .../>
if you want to customize the size of the label:
fontSize: 30,
color: "red",
"&$labelFocused": {
color: "purple"
}
},
labelFocused: {}
};
function App({ classes }) {
return (
<div className="App">
<TextField
id="standard-with-placeholder"
label="Your Label"
InputLabelProps={{
classes: {
root: classes.labelRoot,
focused: classes.labelFocused
}
I can not change the color and CSS from the TAB PANEL using material-ui Some ideas? :(
Looks like useStyle and theme are not working. I could change some other properties like scrollable but not the colors. I wonder if there is some conflict con other CSS, but I don't think so because the colors I see from the TABs are blue, I'm not using blue in my Web-App.
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`scrollable-auto-tabpanel-${index}`}
aria-labelledby={`scrollable-auto-tabpanel-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `scrollable-auto-tabpanel-${index}`,
'aria-controls': `scrollable-auto-tabpanel-${index}`,
};
}
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 0,
background: 'white',
},
}));
export default function NavTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<AppBar position="static">
<Tabs
variant="container-fluid"
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
centered
>
It's actually the AppBar that has that blue color. Upon reviewing the stylesheet, the individual tab items actually have transparent as a default value for background-color. So to solve this, just override the background of the root element of AppBar
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 0,
background: "white"
}
}));
export default function NavTabs() {
const classes = useStyles();
<AppBar position="static" classes={{ root: classes.root }}>
...
import React from 'react';
import {
List, ListItem,
} from '#material-ui/core';
import {
makeStyles, createStyles,
} from '#material-ui/core/styles';
import clsx from 'clsx';
import VideoCard from './VideoCard';
const useStyles = makeStyles(() => createStyles({
root: {
display: 'inline-flex',
},
item: {
padding: '80px 40px',
},
}));
export default function VideoList(props: any) {
const { videos } = props;
const classes = useStyles();
return (
<div>
<List className={clsx(classes.root)}>
{videos.map((video: any) => (
<ListItem className={classes.item} button key={video}>
<VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} />
</ListItem>
))}
</List>
</div>
);
}
import React from 'react';
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
import Thumbnail from './Thumbnail';
export default function VideoCard(props: any) {
const { thumbnailImage, videoTitle } = props;
return (
<div>
<Thumbnail imageSrc={thumbnailImage} />
<Typography>{videoTitle}</Typography>
</div>
);
}
I am trying to display a series of video titles and thumbnails (like how video cards are displayed on the frontpage of youtube). How do I get the cards to go to a new line say every 4 cards? Currently, they line up and go off screen.
Edit: added my VideoCard code aswell
Make it float: 'left' and then set 100% - 25% to make a new line every 4 cards
const useStyles = makeStyles(() =>
createStyles({
root: {
width: "100%",
display: "inline-block"
},
item: {
padding: "80px 40px",
float: 'left',
width: '25%'
}
})
);
I want to add linear-gradient to Material-UI Slider as color. Is it possible? I try everything.
color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)'
linear-gradient creates an image not a color. So you need to use it in CSS that specifies an image (e.g. background-image).
Below is an example of a Slider using a gradient.
import React from "react";
import { makeStyles, withStyles } from "#material-ui/core/styles";
import Slider from "#material-ui/core/Slider";
const useStyles = makeStyles({
root: {
width: 200
}
});
const CustomSlider = withStyles({
rail: {
backgroundImage: "linear-gradient(.25turn, #f00, #00f)"
},
track: {
backgroundImage: "linear-gradient(.25turn, #f00, #00f)"
}
})(Slider);
export default function ContinuousSlider() {
const classes = useStyles();
const [value, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<CustomSlider
value={value}
onChange={handleChange}
aria-labelledby="continuous-slider"
/>
</div>
);
}