I have a react material-ui expansion panel now the collapse child of that panel is causing me issues so I need to set it's overflow to visible however I do not know how I can do that in react especially since this child is not a class I've defined but a child of the imported expansion panel.
I've tested in the console and I know which class needs to overflow: 'visible' style on it however I have no idea how to apply it.
Below is my HTML and css for basic structure but really the question is how can I apply it to the child component of the expansion panel
The HTML
<ExpansionPanel
className={classes.expansionPanelExpanded}
>
// the stuff inside the panel
</ExpansionPanel>
The CSS
const materialStyles = (theme: Theme) =>
createStyles({
container: {
overflow: 'visible'
},
expansionPanelExpanded: {
boxShadow: 'none',
root: {
overflow: 'visible',
expansionPanelExpanded: {
overflow: 'visible'
},
},
},
})
All the stuff inside expansionPanelExpanded is what I've tried to pass the overflow: 'visible' to it's child which in the console appears with the className as:
class='MuiCollapse-container-444 MuiCollapse-entered-445'
The Parent of this class is:
class='MuiPaper-root-405 MuiPaper-elevation1-408 MuiExpansionPanel-root-402 WithStyles-ExpansionPanel--root-500 MuiExpansionPanel-expanded-403'
if I can set the overflow: visible style for this it would solve my problem.
Related
I have a MultiImage component that renders images in Slideshow / Carousel and display the active image in a column layout. I am trying to pass down styling from parent component to the Multi-image components (Width and Height) to style the active image without impacting other components that also use the same component MultiImage.
I tried making the props optional
interface MultiImageProps {
width?: number
height?: number
images: string[]
}
Then in my actual styled component, I am applying the styles as following
width: ${(props) => props.width}px;
height: ${(props) => props.height}px;
This is the parent component ViewProductsImage
<MultiImage
width={800}
height={600}
images={
data?.universalProduct?.image?.url
? [
data?.universalProduct.image.url,
...(data?.universalProduct.image.secondaryImages || []),
]
: []
}
/>
Any other suggestions on how to style the child components without having other components styles that's using it being impacted?
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} />
)
}
Currently I am facing an awkward situation:
I want to make the dialogContent's overflow: auto so my modal becomes scrollable if the content exceed the height of the dialog. However, there's a dropdown menu that I'd like it to display normally, but because overflow: auto, I have to not only scroll down the dropdown menu, but also the dialog itself. Can someone help me with this?
const dialogStyle = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100vw',
},
dialog: {
overflow: 'visible',
},
dialogContent: {
overflow: 'auto',
},
}),
)
For anyone who might have the same issue - I figured the answer myself.
So.. The best way to resolve this, is to add an attribute: <Dialog scroll='body' /> and keep the both dialog and dialogContent's overflow as visible.
In React-Admin, I'm trying to apply certain css code inside my Material UI theme as a global attribute. Right when I'm creating my theme, I've been added those lines inside my overrides:
overrides: {
"#global": {
"[class*='RaLayout-content']": {
overflow: "auto !important",
maxWidth: "100vw !important",
},
},
In the entire admin I have many classes like: RaLayout-content-4, RaLayout-content-221, RaLayout-content-31, which are generated by the React-Admin, and I want to apply those css lines in every element that contains the RaLayout-content class.
Because of class names minimization of Heroku deploy, I cannot write those css lines in my index.css cause they'll not apply after the minimization.
Here's how I implemented them before, inside my index.css file (which is working only in development mode):
[class*="RaLayout-content"] {
overflow: auto !important;
max-width: 100vw !important;
}
Notice: I've been also trying to add the MuiCssBaseLine with no success.
Thanks in advance!
I think that you can override the theme with
overrides: {
RaLayout: {
content: {
// your overrides
},
},
...
}
I have a Parent that has a deeply nested child which can get an attribute if selected.
How do I style the background-color of the parent, only if a deeply nested child has an attribute of 'selected'?
<Parent>
<Child>
<NestedChild selected>
This is what I have tried:
const Parent = styled.div`
&[selected] { // But this only styled the child, not the parent}
`;
The CSS way
There isn't one - CSS doesn't allow an element to affect styling of its parents, only that of its children or siblings.
The React purist way
Use the useContext hook along with createContext and a context Provider, or simply pass a callback down through all the nested levels.
The hacky-yet-simple React + vanilla JavaScript way
// set up some styles for `has-child-selected` class
// ...
const Parent = ({ ... }) => {
return <div className="parent">
...
</div>
}
const Child = ({ selected }) => {
const ref = useRef(null)
useEffect(() => {
ref.current.closest('.parent')
.classList[selected ? 'add' : 'remove']('has-child-selected')
}, [selected])
return <div ref={ref}>
...
</div>
}
Edit: I realized I didn't even mention Styled Components in this answer, but I don't think it would change very much. Perhaps someone with more knowledge of Styled Components would be able to enlighten.
I think you can do it with CSS only. So I remember at least. try this.
you can change any tag, and any attr
li:has(> a[href="https://css-tricks.com"]){
color:red;
}
Looks Like it doesn't work at this time. but check when you see this.
:D :D