What I am trying to achieve
I have two classes - root and button - I want to affect button class on root state (for example :hover).
My attempt
I'm trying to display button on root:hover.
const styles = {
root: {
'&:hover' {
// here I can style `.root:hover`
button: {
// and I've tried to affect `.root:hover .button` here
display: 'block'
}
}
},
button: {
display: 'none'
}
}
Expected ouput:
.element-root-35 .element-button-36:hover {
display: block;
}
Current output:
.element-root-35:hover {
button: [object Object];
}
Environment
I'm using Material-UI with React.js. In this situation I'm using withStyles() export.
Below is the correct syntax:
const styles = {
root: {
"&:hover $button": {
display: "block"
}
},
button: {
display: "none"
}
};
Related answers and documentation:
jss-plugin-nested documentation
Using material ui createStyles
Advanced styling in material-ui
Related
I'm trying to change background color of the cell in antD table using onCell property and onMouseOver function, but without success.
onCell: (record, rowIndex) => {
return {
onMouseOver: () => {
console.log("record, row", record, rowIndex);
return {
props: {
style: { background: "yellow", fontWeight: "bold" }
}
};
}
};
}
Working sandbox example:
demo
Any help would be highly appreciated.
If the goal is to add a custom background on hover to the cells of a certain column, perhaps a simple solution would be adding this as a custom class with onCell.
Forked demo with modification: codesandbox
onCell: (record, rowIndex) => {
return {
className: "custom",
};
};
In CSS, define :hover styles with a higher specificity so that it overrides default style for selected cells:
.ant-table-cell.ant-table-cell-row-hover.custom:hover {
background-color: hotpink;
color: white;
}
The code below is from MUI 5, with a MUI 4 solution for change input field when hovering. But it obviously doesn't work, wonder how to achieve this in MUI 5, can't
seem to change the color from the TextField upon hovering. This is done using createTheme in MUI 5
components: {
MuiInputLabel: {
styleOverrides: {
root: {
color: arcBlue,
fontSize: '1rem',
},
},
},
MuiInput: {
styleOverrides: {
underline: {
'&:before': {
borderBottom: `2px solid ${arcBlue}`,
},
// Code from material ui 4
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${arcGrey}`,
},
},
},
},
},
The $ syntax is a feature from JSS, in MUI v5, they switch to emotion so it doesn't work anymore, you have 2 options now:
Use plain string
From this section, you can see a list of class names that describe different MUI component states:
State
Global class name
active
.Mui-active
checked
.Mui-checked
completed
.Mui-completed
disabled
.Mui-disabled
error
.Mui-error
expanded
.Mui-expanded
focus visible
.Mui-focusVisible
focused
.Mui-focused
required
.Mui-required
selected
.Mui-selected
'&&:hover:not(.Mui-disabled):not(.Mui-error):before': {
borderBottom: `5px solid purple`
}
Use constant
Most MUI components have their own class constants if you don't want to hardcode the class name:
import { [component]Classes } from "#mui/material/[Component]";
import { inputClasses } from "#mui/material/Input";
[`&&:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
borderBottom: `5px solid purple`
}
Reference
https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion
I have styles like this:
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red'
},
active: {
// here I want to target the 'container' className I created above like
'& .container': {
backgroundColor: 'green'
}
}
});
I want to target the container className I created inside of the active className. The above won't work because in the DOM, MUI will generate a unique name so I won't be targeting the right class. Wasn't able to find any SO answer or blog or documentation addressing this.
$ rulename is used for this purpose. Here is the documentation of it on Material-UI.
CSS in JS documentation also explains this feature.
container: {
//other styles
},
active: {
"& $container": {
background: "green",
color: "#fff"
}
}
Here one thing which is important that for referencing 'containerrule, it should be defined in the rules object. trying to use"& $containerwithout defining thecontainerrule inside themakeStyles` will not work.
Here is the working demo:
You can refer using $
You will have to modify your DOM little bit such that the active className is not the parent of container. Instead add the active className to the conatiner element itself.
so your css style might look like below
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red',
'&$active': {
backgroundColor: 'green'
}
},
});
I think this is what you are looking for $rulename
How to Use $ruleName to reference a local rule within the same style sheet
In your case i think the solution would be
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red'
},
active: {
.container: {
backgroundColor: 'green'
}
}
});
Which should compile to
.root.container.active{}
and on the target tag taking a example of button here
<Button
classes={{
root: classes.root,
container: classes.container,
active: classes.active,
}}>
Havent worked with MUI yet but even in vue or react the way this is achived is by setting a dynamic name on the tag that is targeted via script.
i want to override on specific component with parent reference, like search input text on datatable, right now i override the whole input to achive this
overrides:{
mycomponentselector: {
MuiPaper: {
MuiTabs: {
PrivateTabIndicator: {
root: {
backgroundColor: 'red'
}
}
}
}
}
}
this is one of the example where i want to remove underline on the input search datatable but i end up override the whole input
i am sorry for my bad explanation,
thanks in advance
Here is how you can select the component only if it's inside a parent component (in this example the parent component is Card)
overrides: {
MuiCard: {
root: {
"& .MuiInputBase-root:not(.Mui-disabled)": {
"&::before, &::after": {
borderBottom: "none !important"
}
}
}
}
}
Live Demo
I want to get rid of the Card on the background react-admin's List (v3.4.2). I get the desired effect if I define a string on the component property:
<List component={"some string"}/>
But this spams the console with an error:
And I don't want to have that error. On top of that, I think I shouldn't be changing the component property (I can't find it on the official docs).
The code should be the following: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/List.js
How should I do this? Is it possible to pass a style? Is there any component that works out of the box? Or should I just go custom?
You can hide the background using styling:
import { makeStyles } from '#material-ui/core/styles'
const useListStyles = makeStyles(theme => ({
content: {
boxShadow: 'none',
backgroundColor: 'inherit',
},
main: {
// backgroundColor: 'red',
},
root: {
// backgroundColor: 'red',
},
}))
const MyList = (props) => {
const classes = useListStyles()
return (
<List classes={classes} {...props} >
...
</List>
)
}