const useStyles = makeStyles({
buttonStyle: {
background: "red",
"&:hover": {
transitionDelay: '1',
transform: "scale(1.1)",
background: "red",
},
},
});
how can i implemated i transitionDelay on makeStyles? This did not
work.
You're missing a few things here:
You need a transitionProperty to which the transitionDelay will apply to. In your case, it is the transform CSS property.
Your transitionDelay needs to include the units of the delay e.g. 1s or 1000ms.
If you want to apply your transitions on the button when it is not on a hover state, then apply the styling to the button instead of the &:hover.
This is what it will look like:
const useStyles = makeStyles({
buttonStyle: {
background: "red",
transitionProperty: "transform",
transitionDelay: "1s",
"&:hover": {
transform: "scale(1.1)",
background: "red",
},
},
});
Related
I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component.
None of these methods work:
const useStyles = makeStyles((theme) => ({
// Method 1:
'#global': {
'.MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 2:
cell: {
'& .MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 3:
cell: {
':focus': { outline: 0 },
},
const classes = useStyles()
const dataGridColumns: GridColumns = [
{
...other,
cellClassName: classes.cell,
}]
Edit:
'#global': {
'.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 0,
},
},
worked for me, but I would prefer not to use a global css adjustment.
You can modify the MuiDataGrid-cell class by using Material UI's useStyles() function like the following (no need to declare globally):
import { makeStyles } from '#material-ui/core/styles';
import { DataGrid } from '#material-ui/data-grid';
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
const MyComponent = () => {
const classes = useStyles();
return (
<DataGrid
className={classes.root}
// ...other table setup props
/>
);
}
export default MyComponent;
Resources:
https://material-ui.com/styles/advanced/#with-material-ui-core
https://material-ui.com/api/data-grid/#css
https://github.com/mui-org/material-ui-x/issues/420
Edit: Updated for 4.0.0-alpha.29
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
Just for completion sake this is how I styled the DataGrid with styled components and it worked.
const StyledDataGrid = styled(DataGrid)`
&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus,
&.MuiDataGrid-root .MuiDataGrid-cell:focus {
outline: none;
}
`;
If you're using MUI >= 5, you can simply do the follow:
<DataGrid
sx={{
"&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
outline: "none !important",
},
}}
...
/>
const useStyles = makeStyles(
() => createStyles({
root: {
'& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within': {
outline: 'none',
},
'& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-cell:focus': {
outline: 'none',
},
},
}),
);
I just needed to do this as well for a project I'm working on.
You can override many of the classes used by the datagrid, but you'll need to make sure that the selector being used is more specific in order for it to take precedence.
Many of their classes are documented here in the CSS section.
The below snippet worked for me.
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiDataGrid-root": {
"& .MuiDataGrid-colCell:focus": {
outline: "none"
},
},
},
}));
The perfect way for me was add this code to your css file:
.MuiDataGrid-root .MuiDataGrid-columnHeader,
.MuiDataGrid-root .MuiDataGrid-cell {
outline: none !important;
}
I found that if we set it just for :focus, then if we click to a button of cell, outline still visible
I am setting the background color of a Drawer component using useStyle. if i set background: 'red' it works fine. But setting it to background: 'primary' doesnt work. What might i be doing wrong? Here is my code:
const useStyles = makeStyles((theme) => ({
drawer: {
flexGrow: 1,
flexShrink: 0,
},
drawerPaper: {
flexGrow: 1,
background: 'primary',
},
}));
<Drawer
className={classes.drawer}
variant='persistent'
anchor='top'
open={true}
classes={{
paper: classes.drawerPaper,
}}
>
const useStyles = makeStyles(({ palette }) => ({
drawerPaper: {
flexGrow: 1,
background: palette.primary.main,
},
}));
makeStyles function contain the option param which has a palette, theme colors in it. so you can use palette.primary.main or others.
more see(mui v4 version): https://v4.mui.com/zh/system/palette/#palette
I am trying to apply some styles when a material-ui form control gets focus.
The pseudo-class 'hover' works well in the code below but 'focus' does not.
I am assuming that clicking into the Input component gives it focus but that does not seem to work. Any idea why and how to make it work?
import withStyles from "#material-ui/core/styles/withStyles"
import Input from "#material-ui/core/Input"
import InputLabel from "#material-ui/core/InputLabel"
import FormControl from "#material-ui/core/FormControl"
const styles = theme => ({
root: {
border: "1px solid",
borderRadius: theme.shape.borderRadius,
borderColor: "rgba(0, 0, 0, 0.23)",
marginBottom: theme.spacing.unit * 2,
padding: theme.spacing.unit,
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
"&:focus": {
backgroundColor: "blue"
}
}
})
class TagsComponent extends React.Component {
render() {
return (
<FormControl variant="outlined">
<InputLabel>Tags</InputLabel>
<Input
disableUnderline
classes={{
root: this.props.classes.root
}}
/>
</FormControl>
)
}
}
export default withStyles(styles)(TagsComponent)
You can apply styles by overriding styles for input or override class name focused
const styles = {
...,
focused: {
backgroundColor: "green"
},
input: {
"&:focus": {
backgroundColor: "blue",
color: "white"
}
}
}
<Input
disableUnderline
classes={{
root: classes.root,
focused: classes.focused,
input: classes.input
}}
/>
Sandbox example https://codesandbox.io/embed/gallant-pascal-rh8jc
Having trouble finding documentation on how to change the default border color of an outlined Textfield on hover using a custom theme on Material ui.
MuiOutlinedInput: {
root: {
"&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
border: "2px solid",
borderColor: "yellow"
}
}
}
Reference
Example
MUI v5
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'black',
},
'&:hover fieldset': {
borderColor: 'red',
},
'&.Mui-focused fieldset': {
borderColor: 'yellow',
},
},
},
},
}
I am trying to target the "root" class for the MuiCardActions component with a theme custom-variables override. Here is my JSS:
overrides: {
MuiCardActions: {
root: {
display: 'flex',
justifyContent: 'flex-end',
padding: 0
},
}
},
I can see that the display 'flex' and 'flex-end' is affecting it. If I change it to 'space-between' it does affect the component, but padding has no affect.
Link to post I made on a closed issue - 9749
The override feature behaves at the JavaScript level, not the CSS level.
You have to account for the media query:
https://github.com/mui-org/material-ui/blob/33a03a06c51a0d70260a89a022d6e57e80d02629/packages/material-ui/src/CardActions/CardActions.js#L13-L16
Something like this should do it:
overrides: {
MuiCardActions: {
root: {
display: 'flex',
justifyContent: 'flex-end',
[theme.breakpoints.up(0)] : {
padding: 0,
},
},
}
},