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
Related
I am trying to apply a condition margin to a component. This function receive prop. When the prop.children has a value I want to change the margin. I marked the section I have issues with with //issue here
const StyledTreeItem = styled((props) => (
<TreeItem {...props} TransitionComponent={TransitionComponent} />
))(({ theme }) => ({
[`& .${treeItemClasses.iconContainer}`]: {
"& .close": {
opacity: 0.3,
},
},
[`& .${treeItemClasses.group}`]: {
marginLeft: 15,
paddingLeft: 18,
borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
},
[`& .${treeItemClasses.label}`]: {
// issue here
marginLeft: props.children.length > 0 && 14,
},
}));
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",
},
},
});
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 need to change the font color of a disabled TextField in Material-UI
I've tried the following but it does not work:
const useStyles = makeStyles(theme => ({
input: {
color: theme.palette.text.primary,
},
}));
function Example() {
const classes = useStyles();
return <TextField InputProps={{ className: classes.input }} />
}
I was able to figure out how its done:
const useStyles = makeStyles(theme => ({
disabledInput: {
color: theme.palette.text.primary,
},
}));
function Example() {
const classes = useStyles();
return <TextField
InputProps={{ classes: { disabled: classes.disabledInput } }}
/>
}
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