I have tried these two methods, but neither work.
Method one: change Drawer component directly.
<Drawer
style={{backgroundImage: url('../../public/images/sideList.jpg')}}>
<div>
<SideList/>
</div>
</Drawer>
Method two: add background-image property for a nested div.
<Drawer>
<BackgroundImageDiv>
<SideList/>
</BackgroundImageDiv>
</Drawer>
Please add background image url for your drawer style class
import drawerImage from "../../resources/images/drawer.jpg";
const styles = theme => ({
drawerPaper: {
backgroundImage: `url(${drawerPaper})`
},
})
drawer component sample
<Drawer classesName={classes.drawerPaper} />
In MUI 5.0+, you can do it with this:
Example of the navigation drawer with background image and opacity in black, like this.
<Drawer
variant="permanent"
sx={ {
display: { xs: 'none', sm: 'block' },
'& .MuiDrawer-paper': {
boxSizing: 'border-box',
width: DRAWER_WIDTH,
backgroundImage: 'url(/img/meteorImpact.jpg)',
position: 'absolute',
backgroundSize: 'cover',
backgroundPosition: 'center center',
'&:before': {
position: 'absolute',
width: '100%',
height: '100%',
content: '""',
display: 'block',
background: '#000',
opacity: '0.6'
}
}
} }
open
>
{ brand }
{ drawerItems }
</Drawer>
Related
I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?
First time really playing around with materialUI. I've made a grid of cards and sorted out most of the styling within the same component, so I wanted to move all the useStyles styling to a styling file.
After figuring out how to do so, on reload I could see that no backgroundColor styling across any of the components were rendering, but everything else was.
backgroundColor rendered fine when it was in the same file, and weirdly, it renders once (the other backgroundColours not removed render fine, I mean) if I remove one instance of the color and readd it...but on reload, they're all gone again.
Appreciate some help on this please!
GridStyles.js
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles({
root: {
flexGrow: 1,
marginLeft: '15rem',
marginRight: '15rem',
wordBreak: 'break-all',
whiteSpace: 'unset'
},
containerCard: {
border: 'solid 3px black',
marginRight: '2rem',
marginLeft: '2rem',
marginTop: '3rem',
marginBottom: '5rem',
borderRadius: '8px',
borderLeftStyle: 'dashed',
borderRightStyle: 'dashed',
},
topCard: {
backgroundColor: '#53E9B2',
border: 'none',
boxShadow: 'none',
paddingBottom: '7rem',
position: 'relative'
},
topCardText: {
position: 'absolute',
bottom: 0,
padding: 0,
marginLeft: '2rem'
},
middleCard: {
border: 'solid 2px black',
borderLeftStyle: 'dashed',
borderRightStyle: 'dashed',
backgroundColor: '#53E9B2',
marginRight: '2rem',
marginLeft: '2rem',
marginTop: '1em',
marginBottom: '3rem',
borderRadius: '8px'
},
middleCardText: {
whiteSpace: 'pre-wrap',
color: 'white'
},
bottomCard: {
backgroundColor: '#53E9B2',
border: 'none',
boxShadow: 'none',
paddingBottom: '1rem'
},
bottomCardText: {
color: 'white',
padding: 0,
marginLeft: '2rem'
}
})
export default useStyles
Grid.js
import React from 'react'
import useStyles from './GridStyles'
import {
Grid,
Card,
CardHeader
} from '#material-ui/core/'
const CardGrid = (props) => {
const classes = useStyles(props);
return (
<div className={classes.root}>
<Grid
container
spacing={0}
direction='row'
justifyContent='flex-start'
alignItems='flex-start'
>
{props.cardData.map(elem => (
<Grid
item
xs={4}
sm={4}
md={4}
xl={4}
key={props.cardData.indexOf(elem)}
>
<Card className={classes.containerCard}>
<Card className={classes.topCard}>
<CardHeader className={classes.topCardText} title={elem.name} />
</Card>
<Card className={classes.middleCard}>
<CardHeader
className={classes.middleCardText}
title={`Company Name:\n${elem.company.name}`}
/>
<CardHeader
className={classes.middleCardText}
title={`Company Catchphrase:\n${elem.company.catchPhrase}`}
/>
<CardHeader
className={classes.middleCardText}
title={`Company Bs:\n${elem.company.bs}`}
/>
</Card>
<Card className={classes.bottomCard}>
<CardHeader
className={classes.bottomCardText}
title={`Phone: ${elem.phone}`}
/>
<CardHeader
className={classes.bottomCardText}
title={`Email: ${elem.email}`}
/>
<CardHeader
className={classes.bottomCardText}
title={`Website: ${elem.website}`}
/>
</Card>
</Card>
</Grid>
))}
</Grid>
</div>
)
}
export default CardGrid
Next JS not properly loading Material UI styles until refresh
The accepted answer on this link fixed my problem. Converted the GridStyles page into one const with the styles and nothing else, arrow function with that calls this file with the makeStyles() function reference and it worked.
The video loader overrides the fixed bottom element, thus makes it quite unpleasant. I'am streaming the videos online and player used for it is React HLS player. What would be the best solution to prevent the overriding of loader. Following is the code reference
React HLS Player
<ReactHlsPlayer
url={video_url}
autoplay={false}
controls={true}
width="100%"
height="auto"
config={{
file: {
forceHLS: true,
}
}}
/>
Bottom Navbar Code
const useStyles = makeStyles({
root: {
width: "100%",
bottom: "0px",
position: "sticky"
},
gridList: {
flexWrap: "nowrap",
position: "fixed",
bottom: "0px",
background: "white",
border: "1px solid grey",
width: "100%"
}
});
<GridList className={classes.gridList}>
{itemList.map((tile, index) => {
return (
<GridListTile
key={tile.icon}
style={{ height: "70px", width: "25%" }}
>
<ListItem button key={tile.text}
onClick={(tile.text == "DirectLine") ? directLineFunc : ''}
>
<NavLink
exact
to={tile.link}
key={tile.key}
activeClassName="main-nav-active"
style={{ textAlign: "center" }}
isActive={(match, location) => {
match && setNewActiveLink(index)
return match;
}}
>
<ListItemText
disableTypography
primary={
<Typography
style={{
fontSize: "10px",
fontWeight: "bold",
fontFamily: "Nunito"
}}
>
{tile.text}
</Typography>
}
/>
</NavLink>
</ListItem>
</GridListTile>
);
})}
</GridList>
See the image below
And this the codesandbox link: https://codesandbox.io/s/react-material-forked-dtx6w
Finally I was able to sort out by adding 'zIndex:999' to gridList of BottomNavbar with the following changes in useStyles as:
const useStyles = makeStyles({
root: {
width: "100%",
bottom: "0px",
position: "sticky"
},
gridList: {
flexWrap: "nowrap",
position: "fixed",
bottom: "0px",
background: "white",
border: "1px solid grey",
width: "100%",
zIndex: 999 {/* <-- Here I added this and issue solved */}
}
});
I added a style={{marginBottom: "100px"}} property in the <ReactHlsPlayer /> and it seems to fix your problem
I am using React ROuter and CSS in JS for style.
I'd like to change the background color and border color for the active links child divs (navIndicator and innerIndicator)
import { css, StyleSheet } from 'aphrodite/no-important';
export default ({ task, selectedLocal, selectedScenarioId, taskId }: ITaskNavItem) => {
const isActiveNav = (match: any, location: object) => match;
const theme = getTheme();
const styles = StyleSheet.create({
navLink: {
display: 'flex',
fontSize: '12px',
textDecoration: 'none',
color: theme.palette.neutralPrimary
},
navLinkActive: {
color: theme.palette.neutralPrimary,
fontWeight: 'bold',
'.navIndicator': {
borderColor: theme.palette.themePrimary
},
'.innerIndicator': {
backgroundColor: theme.palette.themePrimary
}
},
navTitle: {
width: '100px',
textAlign: 'center',
wordBreak: 'break-word',
wordSpacing: '100px'
},
linkText: {
display: 'flex',
flexFlow: 'column',
'align-items': 'center'
},
navIndicator: {
borderRadius: '50%',
margin: '10px 0 0 0',
backgroundColor: theme.palette.white,
width: '30px',
height: '30px',
border: '2px solid',
borderColor: theme.palette.neutralPrimary,
position: 'relative'
},
innerIndicator: {
position: 'absolute',
borderRadius: '50%',
width: '20px',
height: '20px',
backgroundColor: theme.palette.neutralPrimary,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}
});
return (
<div className={css(styles.navLink)}>
<NavLink
exact
isActive={isActiveNav}
className={css(styles.navLink)}
activeClassName={css(styles.navLinkActive)}
to={`/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}`}
>
<div className={css(styles.linkText)}>
<div className={css(styles.navTitle)}> {task.title}</div>
<div className={css(styles.navIndicator)}>
<div className={css(styles.innerIndicator)} />
</div>
</div>
</NavLink>
</div>
);
};
However, the navIndicator and innerIndicator colors doesn't change when nav link is active.
Wondering how to get the style working for active link?
NavLink element does not indicate to its children if it active. So I may suggest to get currecnt route from BrowserRouter component (your component should be child of BrowserRouter so NavLink works), compare path and set local isActive variable to indicate if specific route is active.
For example (not tested, just sample):
const StyledLinks: React.FunctionComponent<RouteComponentProps & ITaskNavItem> = ({ task, selectedLocal, selectedScenarioId, taskId, location }) => {
const to = '/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}';
const isActive = to === location.pathname;
const styles = StyleSheet.create({
// ...
navIndicatorActive: {
borderColor: theme.palette.themePrimary
},
// ...
return (
<div className={css(styles.navLink)}>
<NavLink
exact
className={css(styles.navLink)}
activeClassName={css(styles.navLinkActive)}
to={to}
>
<div className={css(styles.linkText)}>
<div className={css(styles.navTitle)}> {task.title}</div>
<div className={isActive ? css([styles.navIndicator, styles.navIndicatorActive]) : css(styles.navIndicator)}>
<div className={css(styles.innerIndicator)} />
</div>
</div>
</NavLink>
</div>
);
}
// Wrap your component withRouter to get location prop
export default withRouter(StyledLinks);
I'm trying to create a loading status indicator using MUI. But I want the background color of dialogue box as none and also want to adjust the height. But I'm not able to do it by the style option provided by them. Any solution?
Now it looks like this..
Code looks like this:
<Dialog
open={true}
style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
title= 'Loading'
titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
<RefreshIndicator
style= {{display: 'inline-block'}}
size={50}
left={50}
top={30}
loadingColor="#FF9800"
status="loading"
/>
</Dialog>
For the latest version ("#material-ui/core": "^1.2.3"), here is how it's done:
<Dialog
{...otherProps}
PaperProps={{
style: {
backgroundColor: 'transparent',
boxShadow: 'none',
},
}}
>
{/* ... your content ... */}
</Dialog>
Take note of the new PaperProps prop. It's not in the documentation but if you check out the source, they are using PaperProps as one of the props you can pass in - since this isn't in the docs, this might change with future versions though, so be careful here.
In material v4 or latest. You can use BackdropProps, see the online demo
You can set the overlayStyle prop on Dialog to change the background color, like so:
<Dialog
open={true}
style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
overlayStyle={{backgroundColor: 'transparent'}}
title= 'Loading'
titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
Directly you can use CircularProgress with css properties, zIndex and opacity, Try this:
<CircularProgress size={2} style={Styles.mainLoader}/>
mainLoader: {
position: 'absolute',
paddingTop: '15%',
width: '100%',
height: '100%',
zIndex: 1000,
backgroundColor: '#000000',
opacity: 0.5,
textAlign: 'center',
}
It will cover the entire screen with .5 opacity and specified background.
You don't have to use a transparent Dialog, MUI exposes the Backdrop component which Dialog uses behind the scene. Backdrop lets you put any content inside a dimmed layer without having to deal with the physical container:
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={open}
onClick={handleClose}
>
<Stack gap={1} justifyContent="center" alignItems="center">
<CircularProgress color="inherit" />
<Typography>Loading...</Typography>
</Stack>
</Backdrop>
Live Demo
Use the bodyStyle props like so:
<Dialog
bodyStyle={{margin:0, padding:0}}
open={true}
style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
title= 'Loading'
titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
<RefreshIndicator
style= {{display: 'inline-block'}}
size={50}
left={50}
top={30}
loadingColor="#FF9800"
status="loading"
/>
</Dialog>
There is the component CircularProgress which you can use directly (instead of building a loding indicator by using Dialog: http://www.material-ui.com/#/components/circular-progress
You can place the loading indicator in a div which is placed in the middle of the page:
JSX:
<div className="my-spinner">
<CircularProgress size={59.5} />
</div>
CSS:
.my-spinner {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-
}
You could use BackgropProps
Whether you could use Modal itself which is a low-level component of Dialog or you could stick to Dialog it's will work for both.
<Modal BackdropProps={{ style: { backgroundColor: "green" } }} ></Modal>
<Dialog BackdropProps={{ style: { backgroundColor: "green" } }} ></Dialog>
Another potential alternative for this (depends on what you want to achieve) is to avoid using a Paper component for the Dialog container. For example, if you use a Box component instead, it won't be visible to the user:
<Dialog
className="MyDialog"
open={!!openProp}
onClose={handleDialogClose}
maxWidth="xl"
PaperComponent={Box}
>
Note that by default it will still contain an 'invisible' padding (or even cover most of the screen if you use the fullWidth prop), and this can be confusing for users, since the Dialog won't get closed when clicking within this invisible component.
<Dialog
open={true}
style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
title= 'Loading'
titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
BackdropProps={{invisible: true}}
>
<RefreshIndicator
style= {{display: 'inline-block'}}
size={50}
left={50}
top={30}
loadingColor="#FF9800"
status="loading"
/>
</Dialog>
List item
Remove backgroundColor: 'transparent' and add BackdropProps={{invisible: true}}
If you are using styled-components,
we can also override more CSS way, with .MuiDialog-paper class, as below:
import styled from "styled-components";
import { Dialog } from "#mui/material";
const StyledDialog = styled(Dialog)`
& .MuiDialog-paper {
background-color: transparent !important;
}
}