I'm working with the divider component of the material ui framework and am stuck with the color changing aspect. With most other components from this framework I've been able to change the color by applying the useStyles() method as such:
const useStyles = makeStyles(theme => ({
textPadding: {
paddingTop: 10,
paddingBottom: 10,
color:'white',
},
}));
But I'm not able to change the color of the dividers using the same approach:
const useStyles = makeStyles(theme => ({
dividerColor: {
backgroundColor: 'white',
},
}));
I of-course then apply it to the component:
<Divider classname={classes.dividerColor}></Divider>
I looked up the docs for it but can't figure out what I've done wrong. Could someone give me a helping hand?
use the classes API to change the divider color:
const useStyles = makeStyles((theme) => ({
divider: {
// Theme Color, or use css color in quote
background: theme.palette.divider,
},
}));
<Divider classes={{root: classes.divider}} />
Divider API, To get your head around Material UI Theme
To change Divider line color in MUI v5 you need to adjust your approach depending on whether the element has children or not.
For an empty Divider:
<Divider sx={{ bgcolor: "secondary.light" }} />
For a Divider with content:
<Divider
sx={{
"&::before, &::after": {
borderColor: "secondary.light",
},
}}
>
<Typography>Some Text</Typography>
</Divider>
Comparing to the other answers for v5, note that you do not need to nest the SX props under &.MuiDivider-root and you can use the theme properties with the SX shorthand strings (e.g., secondary.light instead of (theme) => theme.palette.secondary.light.
You can use
<Divider style={{ background: 'black' }} variant="middle" />
You have to override the CSS using classes.
<Divider classes={{root: classes.dividerColor}} />
See the Material UI docs on CSS overrides: https://material-ui.com/customization/components/#overriding-styles-with-classes
You can directly add color attribute to the divider like so
<Divider color="#FDA228" sx={{ height: 2, width: '92px' }} />
the result would be something like this
You should always use className while using material-ui styling instead of typical javascript style declaration like classname.
You can refer to the official doc also: https://material-ui.com/styles/basics/#hook-api
Using #mui v5 I recognized this was the only way to make it work for myself.
Note:
Because my Divider item has text, the ::before and ::after css
selectors specify which side of the divider to style.
<Divider
sx={{
'&.MuiDivider-root': {
'&::before': {
borderTop: `thin solid ${theme?.palette.primary['700']}`
}
}
}}
style={{
color: "white",
}}
variant="middle"
> Editing as - {username} </Divider>
Example with className :
const useStyles = makeStyles((theme) => ({
divider: {
background: "white",
},
}));
<Divider className={classes.divider} />
In the latest MUI(v5), This is how it is done:
<Divider
sx={{ bgcolor: (theme) => theme.palette.divider }}
style={{
border: "none",
height: 2,
margin: 0,
}}
/>
You can do it with createTheme function inside the react component
const Theme = createTheme({
components: {
MuiDivider: {
variants: [
{
props: { variant: 'dynamic' },
style: {
":before": {
borderTop: "thin solid #ffffff"
},
":after": {
borderTop: "thin solid #ffffff"
},
}
}
]
}
},
})
Use it with the variant key in the html component
<Divider variant={'dynamic'} flexItem></Divider>
Related
First of all, it's good to mention that I'm a bit new to react world. I am using Mui with react. here is my code:
const Search = (props) => {
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
return !isSmall || props.show ? <SearchDiv {...props} /> : null;
};
as you can see it's a simple component that under a circumstance returns another custom component. my problem is that if I Don't add {...props} to the child component(SearchDiv) the whole component Search won't show up. but if I add everything works fine and I can't understand why? do we always need to pass all props to any child component?
I searched StackOverflow and google but I didn't find something similar to my question.
Edit : here is the rest of the code:
const SearchDiv = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "50%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
},
[theme.breakpoints.down("sm")]: {
marginLeft: theme.spacing(1),
},
}));
const Navbar = () => {
const [showSearch, setShowSearch] = useState(false);
return (
<AppBar>
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
<Search show={showSearch}>
<StyledInputBase
placeholder="Search…"
inputProps={{ "aria-label": "search" }}
/>
</Search>
<SearchIcon onClick={() => setShowSearch(true)} />
</Toolbar>
</AppBar>
);
};
export default Navbar;
For reference, see Composition vs Inheritance.
Without passing props, ie
<SearchDiv />
your styled <div> has no children to render. When you pass all the parent props via {...props}, that includes children, the equivalent of...
<SearchDiv children={props.children} show={props.show} />
I wouldn't recommend this though. An alternative would be
<SearchDiv>
{ props.children }
</SearchDiv>
as per the containment section of the guide linked above.
I'm trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to summary elements while it is in the expanded mode. I add this code to the summary element but that's not working. what do you offer me? it worth mentioning that it works on the first accordion but not the others!!!!!!!!!!
sx={{
"&.Mui-expanded": {
minHeight: 0,
margin: '12px 0',
},
"& .MuiAccordionSummary-content.Mui-expanded": {
margin: 0,
}
}}
I used MUI customized accordion and I change its setting to it:
I used my icon. it has a white background and no border and additional padding or margin :))))
export const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
position: 'unset',
border: 'none',
boxShadow: 'none',
maxWidth: 720,
margin: '12 0',
'&:before': {
display: 'none',
border: 'none'
}
}));
export const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
))(({ theme }) => ({
backgroundColor: 'white',
padding: 0,
flexDirection: 'row',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(180deg)'
}
}));
export const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: 0,
border: 'none'
}));
export const FAQText = styled(Typography)({
maxWidth: 628
});
Are you setting this prop on Accordion or AccordionSummary? I've tested your code on StackBlitz by setting it on Accordion element and it worked properly.
I am trying to change the noWrap property of a Typography element upon hover. I have declared a custom CSS class for the parent element and the hover does work. But I have no idea how to alter the noWrap property through CSS now.
I have tried this (the hover works):
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(2),
"&:hover .questionText": {
noWrap: true
}
}
}));
And my JSX:
return(
<Paper className={classes.paper}>
<Typography className="questionText" noWrap={false} gutterBottom variant="body2">test</Typography>
</Paper>);
Thanks for your help
I'd toggle the boolean flag for your noWrap attribute via setState (or state hooks) using a js mouseover. Something like -
const [ wrap, setWrap ] = useState(false);
function toggleWrap() {
setWrap(!wrap);
}
return(
<Paper ...>
<Typography noWrap={wrap} onMouseOver={()=>toggleWrap()} ... />
</Paper>
);
Setting noWrap={true} props in Typography will apply white-space: nowrap styles to your component. This is how you do it using jss:
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(2),
"&:hover .questionText": {
whiteSpace: "nowrap",
}
}
}));
Live Demo
Thanks to Ozrix, I have solved my problem with the following:
const [wrap, setWrap] = useState(false);
and
<Paper className={classes.paper} onMouseEnter={() => {setWrap(true)}} onMouseLeave={() => {setWrap(false)}}>
<Typography noWrap={wrap} gutterBottom variant="body2">
</Paper>
I am trying to acheive the clipped under the app bar style temporary drawer. But I can't seem to be able to set the z index on the temporary drawer.
The temporary drawer in material-ui has the z-index of the modal component which is 1300 as mentioned in the issue I raised here https://github.com/mui-org/material-ui/issues/22562.
So, if I use the approach given in the documentation of setting the appbar zIndex to theme.zIndex.modal + 1, I can get the 'clipped under the app bar` effect. But that would also mean that my appbar would be above all my modals. Which is not what I desire.
So, I wanted to set my temporary drawer to z-index of 1250 and my appbar's z-index to 1251 to get the desired effect without any side-effects.
I am trying to set the zIndex with makeStyles hook as you can see in the sandbox and also the snippet below:
const useStyles = makeStyles((theme) => ({
appBar: {
zIndex: 1251
},
drawer: {
width: drawerWidth,
flexShrink: 0,
zIndex: 1250
},
drawerPaper: {
width: drawerWidth
}
}));
<AppBar position="fixed" className={classes.appBar}>
.
.
.
</AppBar>
<Drawer
className={classes.drawer}
open={true}
classes={{
paper: classes.drawerPaper
}}
>
.
.
.
</Drawer>
codesandbox: https://codesandbox.io/s/material-demo-forked-rq1fj?file=/demo.js
If you don't want to use important! you can override zIndex either by using Material-UI theme API or by inlining styles.
const theme = createMuiTheme({
zIndex: {
appBar: 1251,
modal: 1250,
}
});
...
<ThemeProvider theme={theme}>
<Demo />
</ThemeProvider>,
The downside of this approach is that the styles is applied to all modals, so your actual modals are now below the AppBar which may not be what you want.
The second approach is to inline css style by passing styling object in the style props of your component
<AppBar
className={classes.appBar}
style={{ zIndex: 1251 }}
>
</AppBar>
<Drawer
className={classes.drawer}
style={{ zIndex: 1250 }}
>
Live Demo
Your z-index: 1250 is overriden by inline z-index: 1300 addded by material-ui. You can override this inline style by adding !important to your custom z-index.
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
appBar: {
zIndex: 1251
},
drawer: {
width: drawerWidth,
flexShrink: 0,
zIndex: "1250 !important"
},
...
}));
How to simply set background color of MUI Drawer?
tried this, but doesn't work
<Drawer
style={listStyle3}
open={this.state.menuOpened}
docked={false}
onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>
const listStyle3 = {
background: '#fafa00',
backgroundColor: 'red'
}
Edit: (May-21) - Material UI V4.11.1
This can be done differently in version 4.11.1 and functional components.
There's no need to use an HoC anymore. Here's how it's done:
You should use the makeStyles helper to create the hook with a definitions of the classes and use the hook to pull them out.
const useStyles = makeStyles({
list: {
width: 250
},
fullList: {
width: "auto"
},
paper: {
background: "blue"
}
});
const DrawerWrapper = () => {
const classes = useStyles();
return (
<Drawer
classes={{ paper: classes.paper }}
open={isOpen}
onClose={() => setIsOpen(false)}
>
<div
tabIndex={0}
role="button"
onClick={() => setIsOpen(true)}
classes={{ root: classes.root }}
>
{sideList}
</div>
</Drawer>
)
}
Here's a working sandbox
Edit: (Jan-19) - Material UI V3.8.3
As for the latest version asked, the way to configure the backgroundColor would be by overriding the classes.
Based on material-ui documentation here, and the css api for drawer here - This can be done by creating an object in the form of:
const styles = {
paper: {
background: "blue"
}
}
and passing it to the Drawer component:
<Drawer
classes={{ paper: classes.paper }}
open={this.state.left}
onClose={this.toggleDrawer("left", false)}
>
A working example can be seen in this codesandbox.
Don't forget to wrap your component with material-ui's withStyles HoC as mentioned here
Based on the props you used I have the reason to think that you're using a version which is lower than v1.3.1 (the last stable version) but for the next questions you'll ask, I recommend writing the version you're using.
For version lower than V1, you can change the containerStyle prop like this:
<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>
In MUI v5, you can use the sx prop to style MUI components:
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink",
color: "red",
}
}}
Or use styleOverrides to define the custom styles in createTheme:
const theme = createTheme({
components: {
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: "pink",
color: "red",
}
}
}
}
});
Material UI V4.3.2
As in this version you can change the backgroundColor by making use of makeStyles from '#material-ui/core/styles' as shown below:
import Drawer from '#material-ui/core/Drawer';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
paper: {
background: 'black',
color: 'white'
}
});
const SideDrawer = props => {
const styles = useStyles();
return (
<Drawer
anchor="right"
open={props.drawerOpen}
onClose={() => props.toggleDrawer(false)}
classes={{ paper: styles.paper }}
>
Items
</Drawer>
);
};
export default SideDrawer;
Drawer doesn't accept style props. Use classes instead
See Drawer API
If anyone's looking for how to do this conditionally for dark/light mode, you can make 2 separate classes and use a conditional to use the right one in the component. Here's an example of how to modify #Yirenkyi's answer do achieve this:
import Drawer from '#material-ui/core/Drawer';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
paperLight: {
background: 'white',
color: 'black'
},
paperDark: {
background: 'black',
color: 'white'
}
});
const SideDrawer = props => {
const userPrefersDarkMode = true; //here's your condition
const styles = useStyles();
return (
<Drawer
anchor="right"
open={props.drawerOpen}
onClose={() => props.toggleDrawer(false)}
classes={{ paper: userPrefersDarkMode ? styles.paperDark : styles.paperLight }}
>
Items
</Drawer>
);
};
export default SideDrawer;