Is there a props in material-table to change the row color while hovering?
Something like this example.
Thank you
According to the styling section in the documentation, you can pass a rowStyle props, like this :
options={{
rowStyle: {
backgroundColor: '#EEE',
}
}}
You can also use the onHover's React hook on your table component and apply your hover's style there.
Related
I'm creating AccordionSections for every element I get from my backend this way
<AccordionSection
defaultOpen={activePackage}
headingLevel="h3"
id={
activePackage
? `active-${packageObj.type}-${key.toString()}`
: `${packageObj.type}-${key.toString()}`
}
label={label}
key={`${key.toString()}-${packageObj.type}`}
>
I'm wrapping this Accordion sections in a styled Accordion component:
<Wrapper spaceStackEnd="s">{content}</Wrapper>;
I want to show the label with the green colour only for the AccordionSection that start with active in the id:
const Wrapper = styled(Accordion)`
span > {
&:first-child {
${(properties) =>
properties.id?.startsWith('active') &&
css`
color: green;
`};
}
}
`;
Span is because the generated elements are spans. Nothing is happening. am I missing something ?
You can pass a parameter active to your component. If you have children I assume that you have multiple components. So in order to render multiple components developers usually use the map() function. The second argument of the map() function is the place of the component you want to render based on the array of data you have. you can simply do this:
<YourComponent {...yourProps} active={index === 0? "green" :
"black(default color you set)"} />
and then pass that active prop to your styled-components.
if you want know more about this you can visit this link.
This primary-main should be converted to color something like #abcdefg but it is just pasting primary-main as it is
I'm using angular MUI + React
Like Jacob's comment, you would need to reference the theme within your fill key, like so:
<menu.icon
sx={{
fill: theme => selected ? theme.palette.primary.main : theme.grey.A400,
color: selected? 'primary.main' : 'grey.A400',
}}
/>
Not all properties are theme aware. In that case you need to bring in the theme object. Don't use the useTheme hook as Jacob mentioned in his comment. Instead just use a function, which will import the theme object.
The default behavior for the new DataGrid is to hide a filter icon unless you hover over the column header (and have a filter applied). In the previous version the icon remained visible.
Codesandbox https://codesandbox.io/s/mui-datagrid-filter-icon-7rbrk
When a filter is applied it adds a new iconButtonContainer div. The classes are: MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer
Is there a way to override this behavior? All I'd like to do is set visibility to always be visible when that div is generated by the library.
The answer here was to create a separate styled component of the data grid and use the global classnames imported from mui to reference the correct one for the style you wish to override. In my case it was something like:
const MyStyledGrid = styled(DataGrid, () => ({
[`& .${gridClasses.iconButtonContainer}`] : {
visibility: "visible",
width: "auto"
}
}))
function MyComponent() {
return (
<MyStyledDataGrid {...props} />
)
}
How do I go about styling the transparent dark overlay of a material-ui dialog or modal?
I'm using material-ui/React/Typescript.
Instead of a transparent dark, I want it to be a transparent white.
I'd prefer a JSS solution but an inline style is welcomed.
You can use the BackdropProps property of the modal:
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.open}
onClose={this.handleClose}
BackdropProps= {{
classes: {
root: classes.backDrop
}
}}
>
and in your style object:
...
backDrop: {
background: 'rgba(255,255,255,0.2)',
},
The API for this has changed a bit in the last couple of years. BackdropProps is now referenced by slotProps.backdrop. Meaning the component now takes a slotProps prop, that receives an object, one of the properties being backdrop all lowercase. backdrop takes an object that can include many things, including a style prop that you use like usual.
<Modal
slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.2)' } } }}
>
</Modal>
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().