I am using material-ui ListItem to show my nav bar items.
I wrote the following CSS code to show styling when each item selected.
<List>
{routes.map(route => (
<Link to={route.path} key={route.name} style={{ textDecoration: "none" }}>
<ListItem button key={route.name} className={classes.listWrap}>
<ListItemText primary={route.name} className={classes.listItemText} />
</ListItem>
</Link>
))}
</List>;
CSS
listWrap: {
"&:hover": {
border: "1px solid #6c757d",
color: "black"
},
textAlign: "center",
"&:active": {
background: "#6c757d",
color: "black"
}
}
When I select one ListItem the styling doesn't work
how can we fix?
You can use focus instead of active.
listWrap: {
"&:hover": {
border: "1px solid #6c757d",
color: "black"
},
textAlign: "center",
"&:focus": {
background: "#6c757d",
color: "black"
}
}
Related
I was trying to change the hover effect of mui Auto Complete component options [inside the drop down]. But it seems I can not find the proper method to do so.
This is the hover effect I am trying to change : Image
I want to put my own color choice.
This is my code [sorry I am new to react. pretty bad codes] .
I tried many solution from stack overflow and other websites. They did not work for me [may be because I did not understand what they were saying].
I just want to change the hover effect color, when the mouse hovers over the options inside the select componenet. But I can not figure out how to do it.
This is my component Image
export default function SelectBox ( { ...props } ) {
return (
<Autocomplete
autoComplete={ true }
disablePortal
id="combo-box-demo"
options={ props.options }
ChipProps={ { backgroundColor: "green" } } // I have no idea what this does
sx={ {
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// no idea what this does too
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']" :
{
backgroundColor: "#FF8787",
},
} }
renderInput={ ( params ) => <TextField { ...params } label={ props.label } size='small' className='color-change'
sx={ {
width: "80%", backgroundColor: "#F1F1F1",
'.MuiOutlinedInput-notchedOutline': {
borderColor: '#C6DECD',
}, borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}, "&:hover": {
"&& fieldset": {
border: "1px solid green"
}
}
} } /> }
/>
);
}
Assuming that the goal is to customize the background color of options when being hovered, it seems that posted code just need to add :hover to a selector for the sx prop of Autocomplete.
Simplified example tested here: stackblitz
Change the following selector:
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']": {
backgroundColor: "#FF8787",
};
To add :hover so that it selects the hovered:
// 👇 Select the hover item here
'& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover': {
// 👇 Customize the hover bg color here
backgroundColor: "#FF8787",
};
Full example for Autocomplete, the original selector is kept in here so it customizes the selected item to match the hover effect, but this an optional approach.
export default function SelectBox(props) {
return (
<Autocomplete
autoComplete={true}
disablePortal
id="combo-box-demo"
options={props.options}
ChipProps={{ backgroundColor: "green" }}
sx={{
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// 👇 Select the hover item here
"& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover": {
// 👇 Customize the hover bg color here
backgroundColor: "hotpink",
},
// 👇 Optional: keep this one to customize the selected item when hovered
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover":
{
backgroundColor: "hotpink",
},
}}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
size="small"
className="color-change"
sx={{
width: "80%",
backgroundColor: "#F1F1F1",
".MuiOutlinedInput-notchedOutline": {
borderColor: "#C6DECD",
},
borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green",
},
"&:hover": {
"&& fieldset": {
border: "1px solid green",
},
},
}}
/>
)}
/>
);
}
I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>
If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>
Not sure why this doesn't work, but I can't seem to use focus and hover in the same MUI styled component for React. Here is a code sandbox to illustrate what I mean. When I click on the Select element, the background and border don't change colors:
const SelectStyle = styled(Select)(({ theme }) => ({
width: "175px",
border: `1px solid #C4CDD5`,
borderRadius: 3,
fontSize: "1.2rem",
"&:hover": {
backgroundColor: "#DFE3E8",
border: `1px solid #919EAB`
},
"&:focus": {
backgroundColor: "#54D62C",
border: `1px solid #AAF27F`
},
"& .MuiSelect-select": {
paddingTop: 5,
paddingBottom: 5,
fontSize: "1.2rem",
alignItems: "center",
display: "inline-flex"
}
}));
Not sure why this is or how to fix it?
Override .Mui-focused class like this :
"&.Mui-focused": {
backgroundColor: "#54D62C",
border: `1px solid #AAF27F`
}
Here is working example.
I'm using material UI styling to style a list and while it changes the color of the text the icons won't change color unless inline styling is used. Inline styling is not a viable solution to as I plan to have switchable theme.
Below is the code
<ListItem
button
variant="contained"
selected={selectedIndex === index}
key={text}
component={Link}
to={url}
disabled={disabled}
className={classes.listItem}
classes={{
selected: classes.selected,
}}
onClick={(e) => handleListItemClick(e, index)}
>
<ListItemIcon>{icon}</ListItemIcon>
<Typography variant="button">
<ListItemText
primary={text}
primaryTypographyProps={{
variant: "h1",
style: { fontWeight: "600" },
}}
className={classes.txt}
/>
</Typography>
</ListItem>
And the styling
listItem: {
padding: "1.5vh",
color: theme.palette.background.paper,
"&:hover": {
backgroundColor: theme.palette.primary.main,
},
"&:hover$icon": {
color: theme.palette.primary.main,
},
"&:hover$txt": {
color: theme.palette.primary.main,
},
"&$selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.primary.main,
fill: theme.palette.primary.main,
// border: "1px solid #2699fb",
"&:hover": {
backgroundColor: theme.palette.background.default,
},
},
"&$selectedSection": {
backgroundColor: theme.palette.background.default,
color: theme.palette.primary.main,
fill: theme.palette.primary.main,
"&:hover": {
backgroundColor: theme.palette.background.default,
},
},
}
I would like to add a custom style for Material UI tooltip arrow but I can not set the border color and the background color.
This is the configuration I have - react:
const useStylesBootstrap = makeStyles(theme => ({
arrow: {
// color: '#E6E8ED',
border: '1px solid #E6E8ED',
},
tooltip: {
backgroundColor: theme.palette.common.white,
border: '1px solid #E6E8ED',
color: '#4A4A4A'
},
}));
This is what I want to achieve:
I want to apply a gray color in the triangle border and the background will be white.
On the arrow configuration, the border config will not work, it will apply a border color in the square that's housing the triangle. Without material UI, the issue could be solved using the pseudo :before and :after to achieve the desired output. I would like to know if there is a solution to this using material UI custom configuration. Not too familiar with Material UI, your help will be appreciated
You are right, You need to override &:before pseudoselector like this.
Here is the code sandbox project link
import React from "react";
import Button from "#material-ui/core/Button";
import Tooltip from "#material-ui/core/Tooltip";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
arrow: {
"&:before": {
border: "1px solid #E6E8ED"
},
color: theme.palette.common.white
},
tooltip: {
backgroundColor: theme.palette.common.white,
border: "1px solid #E6E8ED",
color: "#4A4A4A"
}
}));
export default function ArrowTooltips() {
let classes = useStyles();
return (
<Tooltip
title="Add"
arrow
classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
>
<Button>Arrow</Button>
</Tooltip>
);
}
See tooltip css. Use arrow and &::before to target the arrow and apply your styles. (note the double :: there)
makeStyles - style
arrow: {
fontSize: 20,
color: "#4A4A4A",
"&::before": {
backgroundColor: "blue",
border: "2px solid red"
}
}
JSX
<Tooltip classes={{ arrow: classes.arrow }} title="Delete" arrow>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
Working demo
FYI on material ui 5 makestyles is deprecated.
Because tooltip is in portal you cannot style it directly
const StyledTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />
))``;
then in reder function you can use sx, by setting popper you can access child props via sx
<StyledTooltip
open
arrow
sx={{
'& .MuiTooltip-arrow': {
background: 'red',
},
}}
/>
Using the official MUI customization examples:
https://mui.com/material-ui/react-tooltip/#customization
const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.arrow}`]: {
color: theme.palette.common.white,
"&::before": {
backgroundColor: theme.palette.common.white,
border: "1px solid #999"
}
},
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}));
We can do a custom styling in the following way
import Tooltip from '#material-ui/core/Tooltip'
import { withStyles } from '#material-ui/core/styles'
const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: {
margin: '4px 0',
},
}))(Tooltip)
<HtmlTooltip
title={
<React.Fragment>
<Typography color="inherit">Tooltip with HTML</Typography>
<em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
{"It's very engaging. Right?"}
</React.Fragment>
}
>
<Button>HTML</Button>
</HtmlTooltip>