I'm currently using mui modal and it has a backdrop of solid black even though when I said I want the background transparent.
I did try to set it as color: transparent
Here is a solution, just add this css change '& .MuiBackdrop-root': { backgroundColor: 'transparent' }
<Modal
open={open}
sx={{ '& .MuiBackdrop-root': { backgroundColor: 'transparent' } }}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
Here is a working example https://stackblitz.com/edit/react-npuups?file=demo.tsx
Related
I am currently working to customize MUI Select method, However, I found it is difficult to hover the "NarrowDownIcon":
I want to change the backgroundColor of this icon to "blue" when hover it, this is my code:
icon: {
color: theme.palette.primary.dark,
height: 32,
width: 32,
top: `calc(50% - ${theme.spacing(2.2)}px)`,
borderRadius: "50%",
cursor: "pointer",
"&:hover": {
backgroundColor: theme.palette.primary.lighter,
},
},
then i applied this css to select icon class:
<Select
value={selectedValue}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
className={classes.textInput}
inputProps={{
id,
name: id,
}}
classes={{
icon: classes.icon,
}}
but it doesn't work , can anyone help me with this, Thank you
To change the icon color when you hover anywhere inside Select:
root: {
"&:hover .MuiSvgIcon-root": {
color: "red"
}
},
<Select className={classes.root}>
To change the icon color when you only hover on the icon itself (not the input field). Note that your code doesn't work because the icon has pointerEvents set to none:
icon: {
pointerEvents: "auto",
"&:hover": {
color: "red"
}
}
<Select classes={{ icon: classes.icon }}>
I've tried the process described in this question Trying to add linear gradient to a martialUI icon as a comment stated it should work, but it does not for me.
Thinking that maybe the icons counted as text, I've tried several of the ways to add gradients to text such as here: https://css-tricks.com/snippets/css/gradient-text/.
Yet I haven't gotten anything to work. The gradient either shows as a box image in the foreground, in front of the icon, or just not at all. Does anyone know how to add a gradient to Material UI icons?
EDIT: Forgot to post my code, here's the relevant snippet:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
drawerPaper: {
width: drawerWidth,
backgroundColor:muiTheme.palette.secondary.main
},
drawerContainer: {
overflow: 'auto',
background:muiTheme.palette.secondary.main
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
sideBarButton: {
fill: "#FFFFFF",
fontSize: "50px"
}
}));
const SideBar = (props) => {
const classes = useStyles();
return (
<MuiThemeProvider theme={muiTheme}>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<Box display="flex" flexDirection="column" padding="0" margin="0" >
<List>
<ListItem button>
<ListItemIcon> <SearchIcon className={classes.sideBarButton}/> </ListItemIcon>
<ListItemText/>
</ListItem>
<ListItem button>
<ListItemIcon> <AddCircleIcon className={classes.sideBarButton}/> </ListItemIcon>
<ListItemText/>
</ListItem>
</List>
</Box>
</div>
</Drawer>
</MuiThemeProvider>
)
}
More precisely, this is the list item (which is a material icon) I'm trying to add gradient to:
<ListItemIcon>
<SearchIcon className{classes.sideBarButton}/>
</ListItemIcon>
And this is the style applied:
sideBarButton: {
background: "linear-gradient(to right, #ad5389, #3c1053)",
fontSize: "50px"
}
The other methods I've tried per the links above:
// Just put the style in the tag, doesn't compile
<SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/>
Another method:
sideBarButton:{
background: "-webkit-linear-gradient(#eee, #333)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
fontSize: "50px"
}
Yet another method via https://fossheim.io/writing/posts/css-text-gradient/ :
sideBarButton:{
/* Create the gradient. */
backgroundImage: "linear-gradient(45deg, #f3ec78, #af4261)",
/* Set the background size and repeat properties. */
backgroundSize: "100%",
backgroundRepeat: "repeat",
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
MozBackgroundClip: "text",
MozTextFillColor: "transparent",
fontSize: "50px"
}
P.S. I'm just now learning React, I may very well be missing something simple. Please let me know if you need more info.
Here is an example using Material UI v5.
The fill property of the icon is linked to the linear gradient's id property.
import OpenWithIcon from "#material-ui/icons/OpenWith"
const GradientOpenWithIcon = () => (
<>
<svg width={0} height={0}>
<linearGradient id="linearColors" x1={1} y1={0} x2={1} y2={1}>
<stop offset={0} stopColor="rgba(241,184,74,1)" />
<stop offset={1} stopColor="rgba(207,113,8,1)" />
</linearGradient>
</svg>
<OpenWithIcon sx={{ fill: "url(#linearColors)" }} />
</>
)
I have created an Appbar component in React.js with 3 buttons in it but I would like to change the color when I hover over those buttons. The background color is #3c52b2 and the text color is #fff. I would like the background color and text color exchange when I hover over the button.
I've tried the code below but still not working.
Button: {
'&:hover': {
backgroundColor: '#ffffff',
boxShadow: 'none',
},
'&:active': {
boxShadow: 'none',
backgroundColor: '#3c52b2',
},
},
You probably don't want to change the button's :active state but the default and the :hover state. The following sets the button color to #fff and the backgroundColor to #3c52b2 and switch them on :hover.
I'm not sure how you applied the updated styles (or how you tried to override the default styles), I created this snippet below with makeStyles() but the idea is the same with the withStyles() HOC.
const {
AppBar,
Button,
makeStyles,
Toolbar,
Typography,
} = MaterialUI
const useStyles = makeStyles({
flexGrow: {
flex: '1',
},
button: {
backgroundColor: '#3c52b2',
color: '#fff',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2',
},
}})
function AppBarWithButtons() {
const classes = useStyles()
return (
<AppBar>
<Toolbar>
<Typography>
YourApp
</Typography>
<div className={classes.flexGrow} />
<Button className={classes.button}>
Button 1
</Button>
<Button className={classes.button}>
Button 2
</Button>
</Toolbar>
</AppBar>
);
};
ReactDOM.render(
<React.StrictMode>
<AppBarWithButtons />
</React.StrictMode>,
document.getElementById("root")
)
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.production.min.js"></script>
You could also just create a new styled button component:
const StyledButton = withStyles({
root: {
backgroundColor: '#3c52b2',
color: '#fff',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2',
},
}})(Button);
const {
AppBar,
Button,
Toolbar,
Typography,
withStyles
} = MaterialUI
const StyledButton = withStyles({
root: {
backgroundColor: '#3c52b2',
color: '#fff',
'&:hover': {
backgroundColor: '#fff',
color: '#3c52b2',
},
}})(Button);
function AppBarWithButtons() {
return (
<AppBar>
<Toolbar>
<Typography>
YourApp
</Typography>
<div style={{flex: '1'}} />
<StyledButton>
Button 1
</StyledButton>
<StyledButton>
Button 2
</StyledButton>
</Toolbar>
</AppBar>
);
};
ReactDOM.render(
<React.StrictMode>
<AppBarWithButtons />
</React.StrictMode>,
document.getElementById("root")
)
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.production.min.js"></script>
You can do that in MUI v5 using sx prop:
<Button
variant="text"
sx={{
':hover': {
bgcolor: 'primary.main', // theme.palette.primary.main
color: 'white',
},
}}
>
Text
</Button>
Or styled() if you want to create a reusable component:
const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
':hover': {
color: theme.palette[color].main,
backgroundColor: 'white',
},
}));
<StyledButton variant="contained" color="primary">
Contained
</StyledButton>
<StyledButton variant="contained" color="secondary">
Contained
</StyledButton>
Live Demo
If you want behaviour like default mui button - getting darker during hover, try this for mui theme:
import { darken } from '#material-ui/core/styles';
containedPrimary: {
backgroundColor: someColor,
'&:hover': {
backgroundColor: darken(someColor, 0.3),
},
},
I want to use a dropdown menu of the material-ui components (see https://material-ui.com/components/selects/). Therefore, I copied the specific component out of the example:
Component
return <div>
<FormControl variant="outlined" className={classes.root}>
<InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
Plan
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>dsnfsdjfnsduifn</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Style
const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(1),
minWidth: 120,
color: 'white',
borderColor: 'white'
},}));
Because of my app design, I want to change the color of this dropdown menu to white. At the moment the component looks like this:
As you can see in the component, the variant is outlined. As I understand the documentation (https://material-ui.com/api/select/) I have to overwrite the .MuiSelect-outlined class but I am not sure how I can do this. Unfortunately, the manual only describes the style of simple buttons and not how I can change the style of more complex components like these.
I hope someone can give me an example how I can change the color of the outline, the text and the arrow to white.
There you go
.MuiOutlinedInput-notchedOutline {
border-color: #fff;//for border color
}
.MuiSelect-icon {
color: #fff;// for icon drop down icon color
}
.MuiInputLabel-root {
color: #fff;// for lable color
}
For focus just add the parent .Mui-focused selector on these
const useStyles = makeStyles(theme => ({
select: {
borderColor: 'white'
},
fomrControl{
margin: theme.spacing(1),
minWidth: 120,
color: 'white',
}
}));
I am overriding the tabs of material-ui to have a vertical view of the tabs. However, I also want the label (text) of these tabs to align to the right so it looks more uniform. I've tried every kind of styling but still cannot get it to work.
<VerticalTabs
value={tabValue}
indicatorColor={'primary'}
onChange={this.handleTabChange}
>
<MyTab
disableRipple
lableStyle={{float: 'right'}} <----- doesn't work
label="Sourcing"
/>
<MyTab
disableRipple
lableStyle={{float: 'right'}}
label="Production"
/>
<MyTab
disableRipple
lableStyle={{float: 'right'}}
label="Shipping"
/>
<MyTab
disableRipple
lableStyle={{float: 'right'}}
label="Sales"
/>
</VerticalTabs>
override styling:
const VerticalTabs = withStyles(theme => ({
flexContainer: {
flexDirection: 'column',
},
indicator: {
display: 'none',
},
tabsRoot: {
textAlign: 'right'
}
}))(Tabs)
const MyTab = withStyles(theme => ({
root: {
borderRight: '2px solid lightgray',
textAlign: 'right'
},
selected: {
color: '#4ABDAC',
borderRight: '3px solid #4ABDAC',
textAlign: 'right'
},
label: {
fontSize: 20,
textTransform: 'initial',
},
}))(Tab);
Can anyone point me in the right direction to align the label text to the right side of the tab container?
The Tab component in material ui has a wrapper with align-items: "center" css(MuiTab-wrapper) applied to it. You need to override this and change it to "flex-start" or "flex-end"
https://material-ui.com/api/tab/
wrapper: {
alignItems: "flex-start"
}
Upgrading to the lates version of material-ui fixed this issue (v3.9.1 currently)