I am trying to make the custom hovered style of IconButton and I am doing it as
const useStyles = makeStyles((theme) => ({
root: {
"&:hover": {
borderRadius: "4px",
padding: "3px",
},
},
}));
return (
<div className="App">
<IconButton aria-label="previous" className={classes.root}>
<ArrowLeftIcon />
</IconButton>
</div>
);
But when I hover it, it's flickering and not changing smoothly. I think I am missing some styles to add, but I can't find a way what I'm doing wrong. You can see my codesandbox example here.
If you look at the default styles for IconButton, you'll find that the borderRadius and padding are set directly in the root styles. Only the backgroundColor changes on hover.
If you make the corresponding change to your styles, then it works fine:
const useStyles = makeStyles((theme) => ({
root: {
borderRadius: "4px",
padding: "3px"
}
}));
It's flickering on hover because the padding (the space between its content and border) is modified. Either remove the padding or put it in the default style.
not changing smoothly
This can be easily solved by using css transition. Material-UI theme has a utility method theme.transition.create() to help you create transition quickly.
const useStyles = makeStyles((theme) => ({
root: {
transition: theme.transitions.create(["border-radius"]),
// padding: 3;
"&:hover": {
borderRadius: "4px"
}
}
}));
Live Demo
Related
I have tried changing the placeholder color of the MaterialUI placeholder color but to no success.
Here is what I have tried so far
const useStyles = makeStyles((theme) => ({
emailField: {
width: 265,
height: 13,
fontWeight: 'bold',
'&::placholder': { //This is meant to change the place holder color to green
color: 'green'
}
}
}));
const classes = useStyles(theme);
.....
// Here is where I am trying to apply the styled class to the input element but to
//No Success
<OutlinedInput
placeholder="name#email.com"
inputProps={{
className: classes.emailField
}}
/>
Any suggestion(s) to getting this right will be really appreciated.
Thank you.
This should be work ,Try this
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
color: "green"
},
});
Update
You can make a custom style
const useOutlinedInputStyles = makeStyles({
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}
}
});
const outlinedInputStyles = useOutlinedInputStyles();
import outlinedInput
import OutlinedInput from "#material-ui/core/OutlinedInput";
<OutlinedInput
classes={outlinedInputStyles}
id="id"
labelWidth={40}
/>
Please fix your spell in style.
From "&::placholder" to "&:placeholder".
Targeting the ::placeholder pseudo selector will not work because the placeholder that you see in Material-UI Input components is actually the label of that input, which is animated on focus by javascript
So in order to change the placeholder color target the .MuiFormLabel-root class in your CSS file then change the color and make sure to import the CSS file into your component
.MuiFormLabel-root {
color: green !important;
}
check this codesandbox to play around
I'm trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to some elements while it is in the expanded mode.
Example follows like this, but it's not working, my component is still too "jumpy" (when expanded it increases in width and like some invisible margins are being added)
...
expanded: {
margin: '0px',
},
test: {
'&$expanded': {
margin: '0px',
},
},
...
<Accordion
classes={{
root: classes.test,
expanded: classes.expanded,
}}
expanded={expanded}
>
<AccordionSummary
onClick={() => setExpanded(!expanded)}
classes={{
expanded: classes.expanded,
}}
>
The Summary
</AccordionSummary>
<AccordionDetails>
<p>the details</p>
</AccordionDetails>
</Accordion>
In MUI v5, it's as easy as setting disableGutters to true. This prevents all up/down repositioning when expanding the Accordion. More info here: https://mui.com/material-ui/api/accordion/#props.
You can do that by setting the Accordion margin to auto which should be the same as setting it to 0. Make sure the style is applied to every Accordions on the screen. See this example here.
The Accordion is being moved when expanding is just a side effect of positive margin plus the transition effect when expanded. Removing the margin will likely fix your issue.
import { withStyles } from "#material-ui/core/styles";
import MuiAccordion from "#material-ui/core/Accordion";
import AccordionSummary from "#material-ui/core/AccordionSummary";
import AccordionDetails from "#material-ui/core/AccordionDetails";
import Typography from "#material-ui/core/Typography";
const Accordion = withStyles({
root: {
"&$expanded": {
margin: "auto"
}
},
expanded: {}
})(MuiAccordion);
Live Demo
If people are still struggling with it, write a div or Box and wrap it around each accordion.
Example:
export const AccordionStyled = styled(Accordion)(
sx({
border: 'none',
boxShadow: 'none',
})
);
export const BoxStyled = styled(Box)(
sx({
'& AccordionStyled': {
margin: '0px !important',
},
})
);
<BoxStyled>
<AccordionStyled>
[your code here]
</AccordionStyled>
<BoxStyled>
This overrides margin and also helps control/remove any other styles applied by default. This also works for any MUI component that people find hard to remove or override.
I have a test application which is using Material UI.
I have RTL enabled on it
I have a margin left for my button on the application and when I use jss-rtl, I expect the margin to become margin-right which is not happening. It still remains as margin-left
The direction is passed to theme.js
const customizeTheme = (direction = "ltr") => {
const theme = createMuiTheme({
...defaultThemeOptions,
direction
});
theme.js also has styles for button that should have flipped when direction is RTL
contained: {
color: "red",
marginLeft: theme.spacing(4)
}
But it does not.
The code is here
https://codesandbox.io/s/eloquent-night-5uo4c?file=/src/index.js
I know its bit late to answer this. But posting it, for those who lands here for answer
import { Theme } from '#material-ui/core';
import { createStyles, makeStyles } from '#material-ui/styles';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
margin: theme.spacing(4),
border: "1px solid red"
}
})
);
const classes = useStyles();
.
.
.
<div className={classes.root}>
{/* Content */}
...
{/* End content */}
</div>
I am using React and Material UI for my web application. I want to change the hover color of table row but cannot do that.
Sample code:
x={
hover:{
color:'green'
}
}
<TableRow
hover
key={lead.id} className={classes.row}
classes={{
hover:x.hover
}}
onClick={() => {}}
>
I've got this solution so far. Maybe there are other approaches to override css of tableRow but this one works like a charm:
const styles = theme => ({
tableRow: {
"&:hover": {
backgroundColor: "blue !important"
}
}
});
<TableRow hover
key={lead.id} className={classes.tableRow}
onClick={() => {}}>
Feel free to ask any question.
tableRow: {
hover: {
"&$hover:hover": {
backgroundColor: '#49bb7b',
},
},
}
<TableRow className={classes.tableRow} key={n.id} hover onClick={event => this.handleClick(event)}>Text</TableRow>
The implementation of the TableRow component and the customizing components page show that you need to override two classes, root.hover:hover and .hover to change the hover color.
const useStyles = makeStyles((theme) => ({
/* Styles applied to the root element. */
root: {
// Default root styles
color: 'inherit',
display: 'table-row',
verticalAlign: 'middle',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
'&$hover:hover': {
// Set hover color
backgroundColor: theme.palette.action.hover,
},
},
/* Pseudo-class applied to the root element if `hover={true}`. */
hover: {},
}));
Then in your component, you can apply the styles to the classes prop.
const HelloWorld = () => {
const classes = useStyles();
return (
<TableRow classes={classes}><TableCell></TableCell></TableRow>
);
};
You can maintain dependency on the Material UI hover prop by using
hover: {
'&:hover': {
backgroundColor: 'green !important',
},
},
just put hover in the TableRow, but not the header Tablerow
<StyledTableRow hover key={row.name}>
#material-ui/core/TableRow has built in code to deal with hover, it worked for me.
This is a trivial task in MUI v5. See the docs here:
<Table
sx={{
"& .MuiTableRow-root:hover": {
backgroundColor: "primary.light"
}
}}
>
Live Demo
Just in case, if you are using the component overrides and want to do a style override you have to target the root and not the hover rule. I spent quite a while trying to get the pseudo :hover to work on that but it wouldn't ever work.
Here's what I have.
MuiTableRow: {
styleOverrides: {
// Even though there is a hover rule we have to override it here. Don't ask.
root: {
'&.MuiTableRow-hover:hover': {
backgroundColor: 'blue',
},
},
},
},
Use this is you want to override the component at the theme level vs styled overrides, sx or useStyles.
If you're using withstyles you can just override it in the root element like so:
An example of how to do it is here: https://codesandbox.io/s/7249117670
Trying to figure something out with the material-ui chips. When you click them, they hold a grey color until you click again somewhere else. I want to be able to click and have my active class and click again and have my inactive class. I can't figure out why there is a grey step in the middle.
<div className={classes.root}>
{this.props.chipData.map(data => {
return (
<Chip
key={data.key}
clickable={false}
clickableColorSecondary="white"
label={data.label}
onClick={this.props.toggleChipProperty(data.key)}
className={(data.showing ? classes.active : classes.inactive )}
/>
);
})}
</div>
CSS:
active: {
backgroundColor:"#4054B2",
color:"white",
height:"20px"
},
inactive: {
backgroundColor:"white",
color:"#575b6e",
border:"1px solid #8080806e",
height:"20px"
}
});
This image shows the grey part. You click, it shows grey on the button, then it finally shows the right color once you click off. I find this to be not intuitive. I want to click and have it simply toggle.
enter image description here
I had the same problem with Select Component of Material-UI.
I guess that you can do the same with Chip Component,
just change the MuiIconButton to MuiChip (and maybe select to root also):
Override MaterialUI Component Focus
Let me know if that works for you.
I had the same problem with Select component. I tried with the solution of Konstantinos and I end up solving this problem with 2 steps:
#1 Create a new theme
const theme1 = createMuiTheme({
overrides: {
MuiSelect: {
select: {
'&:focus': {
backgroundColor: 'none'
}
}
}
}
});
#2 Wrap component with theme provider
<MuiThemeProvider theme={theme1}>
<Select...
</MuiThemeProvider>
This is how I solved it and it worked for me. I used styled() Just set the
"&:focus": {
backgroundColor: bgColor
}
Component example:
const AutocompleteChipSemiIncluded = styled(Chip, {
shouldForwardProp: (prop) => prop !== 'bgColor',
})(({ bgColor, theme }) => ({
...(bgColor && {
maxWidth: '180px',
padding: "15px 5px",
backgroundColor: colors.primary.contrastText,
border: `1px dashed ${bgColor}`,
color: bgColor,
'& .MuiChip-deleteIcon': {
color: bgColor,
},
"&:focus": {
backgroundColor: bgColor
}
}),
}));