score:0
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
score:0
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.
score:2
this is a trivial task in mui v5. see the docs here:
<table
sx={{
"& .muitablerow-root:hover": {
backgroundcolor: "primary.light"
}
}}
>
live demo
score:4
you can maintain dependency on the material ui hover prop by using
hover: {
'&:hover': {
backgroundcolor: 'green !important',
},
},
score:4
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.
score:4
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>
);
};
score:5
tablerow: {
hover: {
"&$hover:hover": {
backgroundcolor: '#49bb7b',
},
},
}
<tablerow classname={classes.tablerow} key={n.id} hover onclick={event => this.handleclick(event)}>text</tablerow>
score:9
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.
Source: stackoverflow.com
Related Query
- How to change the text color of the selected row in material ui table
- how to change the color of childs elements on card hover in material ui?
- How to change the font color of Material UI table with makeStyles?
- How can I change the border color when I hover a button with Material UI
- How do I find which Material UI default theme label will change the default border color (not focus or hover border)?
- How to change the hover color of Material-UI table?
- How do you change the Stepper color on React Material UI?
- How to change the selected table row background color with React
- ReactJS 7 - How to conditionally change the background color of table cell only (not the row) based on its value?
- Material UI: How can I change the border color of the Select component?
- How to change the dropdown hover color react Material-UI Select
- How to change the color of the placeholder in material UI React js
- How can I make my Material Icons change color when I hover over them?
- How to change the filtered date format in material table react?
- How to change color of checkbox material table ReactJS
- How do I change the weight and color of the border of the Material UI Dialog?
- Change the border color of Material UI Autocomplete on hover
- How to change the table row color based on 3 conditions in React
- How to change the progress bar background color dynamically in react material ui?
- How I can change the input color of Material UI TextField when is input is disabled [MUI v: 5.0.8]
- How to change Button Color and Name in specific cell in Material UI Table
- How to change Color of the arrow down textfield material ui
- In Material UI, how can I change the border color of the TextField only after the user enters text?
- how to change the color of when hover in the datagrid
- How to change the size of material table in react?
- How to change the color of the primary Material UI
- How to change the border color of MUI TextField
- How do I change the background color of the body?
- How to change the color of a check box in antd?
- How can I change a width of table Material UI / React?
More Query from same tag
- Error in ReactDOM Render when use Route from react-router-dom
- React JS Multiple submit Buttons react-hook-form
- Deploy React components to many personal projects
- Can a custom hook determine which component called it?
- React does not recognize the X prop on a DOM element
- formik + yup and validating fields that are in a child react component
- How to use Autocomplete inside Popover
- Scroll into a certain div
- Adding up the values of an array of objects javascript
- What's the way to handle paths with slash via react-router?
- Best way to configure Reactstrap carousel images to be responsive
- React js: Accessing state of other components
- Children with the same key: Object.assign vs _.merge
- How to set a Relay variable as an enum value?
- Flexbox to fill available space not working inside React.js component
- New event doesn't have latest state value updated by previous event
- TypeScript doesn't catch error with incorrect interface props when setting state - React
- Render Font Awesome from Json?
- Nginx ignores root directive inside location
- Handling updates to store with React/Redux and lifecycle events
- Handle multiple input values with React Redux Toolkit
- Separate a function from a React component (improve modularity)
- How can i use yield in redux-saga?
- How to properly use fontawesome on React js?
- How to convert html string into plain text in React?
- How to pass id in Route React
- How to navigate to different route programmatically in `redux-router5`?
- Using React and Redux Hooks, why is my action not firing?
- Data coming late in redux in my react app
- useEffect getting called twice in react v18