Give each Popper its own css style - javascript

I have a componet that creates 6 experiences each one with its own popper. I want to edit the popper's so that each popper has its each style (background and possition) and I want them all to have the same size image.
I have tried edditing the paper style and adding a className with the id of each experience as the className property but cannot get any styles I apply to work.
This is my experience compoenent.
import React, { memo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/styles';
import Grid from '#material-ui/core/Grid';
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
import Popper from '#material-ui/core/Popper';
import gastronomia from 'assets/experiences/gastronomia.jpg';
import productos from 'assets/experiences/productos.jpg';
import giftcard from 'assets/experiences/giftcard.jpg';
import diversion from 'assets/experiences/diversion.jpg';
import deporte from 'assets/experiences/deporte.jpg';
import belleza from 'assets/experiences/belleza.jpg';
import gastronomiaExperiences from 'data/gastronomia';
import productosExperiences from 'data/productos';
import giftcardExperiences from 'data/giftcard';
import diversionExperiences from 'data/diversion';
import deporteExperiences from 'data/deporte';
import bellezaExperiences from 'data/belleza';
// Proptypes definitions to the component.
const propTypes = {
/** Custom root className. */
className: PropTypes.string,
};
// Default props definitions.
const defaultProps = {
className: null,
};
// Component's styles
const useStyles = makeStyles(theme => ({
root: {
display: 'block',
margin: '0 auto',
maxWidth: '50%',
[theme.breakpoints.down('md')]: {
maxWidth: '70%',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
},
'& .experiences-column': {
display: 'inline-block',
verticalAlign: 'top',
textAlign: 'center',
'&.col1': {
width: '36.31%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'&.col2': {
width: '63.69%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'& .experience': {
padding: 2,
position: 'relative',
'& img': {
width: '100%',
display: 'block',
},
'& .experience-title': {
position: 'absolute',
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
},
'& .deporte': {
backgroundColor: '#000',
'& img': {
width: '30px',
display: 'block',
},
},
},
paper: {
border: '1px solid',
padding: theme.spacing(1)
},
},
},
}), { name: 'ExperiencesStyle' });
/**
* Component used to render a grid of experiences.
*
* #param {object} props - The component's props.
* #returns {object} React element.
*/
const Experiences = memo(
(props) => {
const { className } = props;
const classes = useStyles(props);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const open = Boolean(anchorEl);
const experience = (img, title, id, popoverCategory) => (
<div
className="experience"
aria-describedby={id}
id={id}
onClick={handleClick}
>
<img
data-sizes="auto"
className="lazyload"
data-src={img}
alt={title}
/>
<div className="experience-title">
<Typography
color="textSecondary"
variant="subtitle2"
className="highlight highlight1"
display="inline"
>
{ title }
</Typography>
</div>
<Popper
id={id}
open={anchorEl && anchorEl.id === id || false}
anchorEl={anchorEl}
className={id}
>
<div className={[classes.paper, id]}>
{
popoverCategory.map(url => (
<Grid
sm={4}
>
<img
key={id}
data-sizes="auto"
className="lazyload"
src={url}
alt={ title }
/>
</Grid>
))
}
</div>
</Popper>
</div>
);
console.log();
return (
<div className={clsx(classes.root, className)}>
<div className="experiences-column col1">
{experience(gastronomia, 'GASTRONOMÍA', 'gastronomia', gastronomiaExperiences)}
{experience(giftcard, 'GIFT CARD', 'giftcard', giftcardExperiences)}
{experience(deporte, 'DEPORTE', 'deporte', deporteExperiences)}
</div>
<div className="experiences-column col2">
{experience(productos, 'PRODUCTOS', 'productos', productosExperiences)}
{experience(diversion, 'DIVERSIÓN', 'diversion', diversionExperiences)}
{experience(belleza, 'BELLEZA', 'belleza', bellezaExperiences)}
</div>
</div>
);
},
);
// Component proptypes.
Experiences.propTypes = propTypes;
// Component default props.
Experiences.defaultProps = defaultProps;
export default Experiences;
I am new to meterial ui and relatively new to react so I am a bit lost on how to get the styles to work.

The following code only applies when there is the deporte class is inside a paper class.
paper: {
border: '1px solid',
padding: theme.spacing(1)},
'& .deporte': {
backgroundColor: '#000',
'& img': {
width: '30px',
display: 'block',
},
},
You can take it out of the paper component in the style and put it in the root.
const useStyles = makeStyles(theme => ({
root: {
display: 'block',
margin: '0 auto',
maxWidth: '50%',
[theme.breakpoints.down('md')]: {
maxWidth: '70%',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
},
'& .experiences-column': {
display: 'inline-block',
verticalAlign: 'top',
textAlign: 'center',
'&.col1': {
width: '36.31%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'&.col2': {
width: '63.69%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'& .experience': {
padding: 2,
position: 'relative',
'& img': {
width: '100%',
display: 'block',
},
'& .experience-title': {
position: 'absolute',
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
},
},
},
},
deporte: {
backgroundColor: '#000',
'& img': {
width: '30px',
display: 'block',
},
},
paper: {
border: '1px solid',
padding: theme.spacing(1),
},
}), { name: 'ExperiencesStyle' });
Also replace this:
<Popper
id={id}
open={anchorEl && anchorEl.id === id || false}
anchorEl={anchorEl}
className={id}
>
<div className={classes.paper}>
{
popoverCategory.map(url => (
<Grid
sm={4}
>
<img
key={id}
data-sizes="auto"
className="lazyload"
src={url}
alt={ title }
/>
</Grid>
))
}
</div>
</Popper>
with this:
<Popper
id={id}
open={anchorEl && anchorEl.id === id || false}
anchorEl={anchorEl}
className={id}
>
<div className={clsx(classes.paper, classes[id])}>
{
popoverCategory.map(url => (
<Grid
sm={4}
>
<img
key={id}
data-sizes="auto"
className="lazyload"
src={url}
alt={ title }
/>
</Grid>
))
}
</div>
</Popper>

Related

Text area keeps losing focus

I change the post button from an icon to text, when message is written. But my input keeps losing focus and I have to click it to type each letter. I have commented the code which is causing the problem (in my oppinion). I have been trying to solve it. I moved the textarea out of the component, I gave it a unique key, I moved the Post button out to a new component but none of it worked. Please help!
My Code:
import { useState, useRef, useEffect } from "react"
import {
Box,
Typography,
Button
} from "#mui/material"
import { styled } from "#mui/system"
import {
InfoOutlined as InfoIcon,
InsertPhotoOutlined as PhotoIcon
} from "#mui/icons-material"
import Message from "./Message"
import EmojiPicker from "../EmojiPicker/EmojiPicker"
const Chat = () => {
const Container = styled(Box)({
width: '100%',
display: 'flex',
flexDirection: 'column',
flex: 1
})
const HeaderContainer = styled(Box)({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '1.2rem 2rem',
borderBottom: '1px solid #e8e8e8',
borderLeft: '1px solid #e8e8e8'
})
const NameContainer = styled(Box)({
display: 'flex',
alignItems: 'center',
cursor: 'pointer'
})
const ImageContainer = styled(Box)({
width: '30px',
height: '30px',
borderRadius: '50%',
overflow: 'hidden'
})
const ProfileName = styled(Typography)({
fontSize: '1.7rem',
fontWeight: '600',
marginLeft: '1.5rem'
})
const imageStyles = {
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'center'
}
const ChatContainer = styled(Box)({
flex: 1,
display: 'flex',
flexDirection: 'column',
overflowY: 'scroll',
padding: '1.5rem'
})
const MessageFieldContainer = styled(Box)({
display: 'flex',
alignItems: 'center',
padding: '.5rem 1rem',
border: '1px solid #8e8e8e',
borderRadius: '25px'
})
const SendButton = styled(Button)({
fontWeight: '600',
fontSize: '1.3rem',
textTransform: 'none',
padding: '0'
})
const messageFieldStyles = {
border: 'none',
outline: 'none',
fontSize: '1.4rem',
fontFamily: 'inherit',
resize: 'none',
flex: 1
}
const [message, setMessage] = useState('')
return (
<Container>
<HeaderContainer>
<NameContainer>
<ImageContainer>
<img style={imageStyles} component="image" src="images/person.jpg"/>
</ImageContainer>
<ProfileName>Asfand Yar</ProfileName>
</NameContainer>
<InfoIcon sx={{
fontSize: '2.5rem',
cursor: 'pointer'
}}/>
</HeaderContainer>
<ChatContainer>
<Message type="reciever">Hello</Message>
</ChatContainer>
<Box sx={{ padding: '2rem' }}>
<MessageFieldContainer>
<EmojiPicker />
// Error Code ***********
<textarea
placeholder="Message..."
name="message"
rows="1"
style={messageFieldStyles}
value={message}
onChange={(e) => setMessage(e.target.value)}/>
{
message == "" ? <PhotoIcon sx={{ fontSize: '2.5rem'}}/> : <SendButton>Send</SendButton>
}
// ***************
</MessageFieldContainer>
</Box>
</Container>
)
}
export default Chat

change color on material ui select doesn't work, ReactJS

I have the following code:
const useStyles = makeStyles({
select: {
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
},
'&:not(.Mui-disabled):hover::before': {
borderColor: 'white',
},
},
icon: {
fill: 'white',
},
root: {
color: 'white',
},
})
const classes = useStyles();
return (
<Box sx={ { width: '20%', height: '21%', position: 'relative', bottom: '15px', borderRadius: '10px', padding: '2px', color: 'white', outline: 'white' }}>
<FormControl fullWidth >
<InputLabel id="demo-simple-select-label" style={{color: 'white', borderColor: 'white'}}>Cidade</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={regiao}
label="Região"
onChange={e => (handleChange(e))}
inputProps={{
classes: {
icon: classes.icon,
root: classes.root,
},
}}
>
<MenuItem value={10}>Sao Paulo</MenuItem>
</Select>
</FormControl>
</Box>
But it doesn't work. My react app goes blink when i go to the there where the select. How can i change the color select from MUI ?
add style to your component like:
sx={{
'& .MuiTabs-indicator': {
borderColor:'white'
},
'& .MuiTab-root.Mui-selected': {
borderColor:'white'
}
}}

How to overlay the expand of accordion?

I would like to overlay the expand of the accordion but I don't know whoch part should I do. in the first picture show that output I want it overlay the other textfield when clicking the dropdown icon, as for the second picture show my current output which every time I click the dropdown it does not overlay rather it adjust the textfield. any advice?
What I want:
My current output:
my code:
<Accordion expanded={isExpanded} onClick={() => setExpanded(!isExpanded)}>
<AccordionSummary
expandIcon={<Icon icon={IMAGE.DropIcon} classStyle={classes.icon} />}>
{changeType}
</AccordionSummary>
<AccordionDetails>
<Button
className={classes.button}
onClick={() => onChangeType('GOLD')}>
GOLD
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('GEMS')}>
GEMS
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('COINS')}>
COINS
</Button>
</AccordionDetails>
</Accordion>
my styles:
const Accordion = withStyles({
root: {
padding: 0,
marginBottom:'1rem',
borderRadius: '8px',
boxShadow: 'none',
minHeight: '2em',
width: '15vw',
fontSize: '1.5em',
fontWeight: 600,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&$expanded': {
minHeight: '2em',
padding: 0,
marginTop: 2,
marginBottom: 2,
},
},
expanded: {},
})(MuiAccordion);
const AccordionSummary = withStyles({
root: {
margin: 0,
padding: '0 0 0 1em',
display: 'flex',
flexDirection: 'row',
borderRadius: '8px',
border: '1px solid',
minHeight: '2em',
width: '13.7vw',
'&$expanded': {
minHeight: '2em',
},
'& .MuiAccordionSummary-expandIcon.Mui-expanded': {
transform: 'none',
},
'& .MuiAccordionSummary-expandIcon': {
transform: 'none',
transition: 'none',
},
'& .MuiIconButton-edgeEnd': {
margin: 0,
padding: 0,
},
},
content: {
margin: 0,
'&$expanded': {
margin: 0,
},
},
expanded: {},
})(MuiAccordionSummary);
const AccordionDetails = withStyles(() => ({
root: {
padding: '0',
display: 'flex',
flexDirection: 'column',
width: '100%',
},
}))(MuiAccordionDetails);
You can add overlay by adding z-index to the AccordionDetails.
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<div style={{zIndex:1 ,position:'absolute' ,width:'100%'}}>
<Card >
<AccordionDetails>
<Button>GOLD</Button>
<Button>GEMS</Button>
<Button>COINS</Button>
</AccordionDetails>
</Card>
</div>
</Accordion>
{/* Other contents of the page */}
hey I was looking to Accadian docs https://mui.com/components/accordion/
and all you need to do is just add some for AccordionDetails like background color , and to match the image some padding at the bottom, border and border radius and I tried this for demonstrate this here https://stackblitz.com/edit/react-k3tktv?file=demo.js

Image Overlay using JS styling

Currently, I am trying to place an overlay on top of a background image. For some reason I just can't seem to get the background color to lay on top of the image. Any suggestions would be greatly appreciated. I am using a lot of Material UI etc, so my styling is done using JS.
import React from 'react'
import Background from '../images/background.jpg'
// MUI STUFF
import Grid from '#material-ui/core/Grid'
import Container from '#material-ui/core/Container'
import Box from '#material-ui/core/Box'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
card: {
width: '100%'
},
overlay: {
position: 'absolute',
objectFit: 'cover',
width: '100%',
height: 400,
margin: 0,
backgroundColor: '#5BC2E7'
}
}))
const Home = () => {
const classes = useStyles()
return (
<Box>
<div className={classes.overlay}>
<Box className={classes.background}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</Box>
</div>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>
)
}
export default Home
try this css:
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
margin: 0,
backgroundColor: '#5BC2E7'
}
With this html:
<Box>
<Box className={classes.background}>
<div className={classes.overlay}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</div>
</Box>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>

Why particles.js height not expanding?

I want to use particles.js for my project background. I'm having an issue with height. It's not expanding height in device web. Actually height property is not working. Please help me with this.
Here is the code:
https://codesandbox.io/s/4zv0329nn0
particle.js component.
import React from "react";
import Particles from "react-particles-js";
export default () => (
<div
style={{
width: "100%",
height: "100%",
backgroundColor: "blue"
}}
>
<Particles
params={{
particles: {
number: {
value: 50
},
size: {
value: 3
}
},
interactivity: {
events: {
onhover: {
enable: true,
mode: "repulse"
}
}
}
}}
/>
</div>
);
App component.
const App = () => {
return (
<div
style={{
width: "100%",
height: "100%",
margin: "0",
padding: "0"
}}
>
<ParticleComponent />
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
>
<h1>test</h1>
</div>
</div>
);
}
Add height={window.outerHeight} prop to ParticleComponent.
Solution here 👇

Categories