import React, { useState } from "react"; import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; export default function DetailedAccordion() { const [expanded, setExpanded] = useState(null); const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded…
I am new in React and a little bit confused regarding to reusable components. I create my pages e.g. Employee in a pages folder and keep Material UI components e.g. Datatable in the components folders. Normally I would copy Datatable…
I have three columns and I wanted to add a column for removing each row. I need to add a column for "removing" on the right. Is it possible? How will I do it? CODESANDBOX: CLICK HERE const CustomTableRow =…
My Slide component with svg picture is not working. It's just showing a white box moving from left to right, (with no actual picture). How can I get this to work? Following the documentation here: https://mui.com/material-ui/transitions/ import { Paper, Slide…
I am trying to extract the logic of the Material UI v5 SnackbarAlert into a re-usable component. I have found a very similar question answered recently, however my app is using JavaScript. I've attempted to adapt this to JavaScript, but…
When using Styled Components with MUI System Props I found that the styled component styling takes precedence, for example in the snippet below the box would render with justify content set as space-around: const CustomBox = styled(Box)(() => ({ display:…
I have a site that imports markdown or mdx files and renders them. I have formatted the normal markdown tables using table: (props) => <Typography variant="table">{props.children}</Typography> this works fine. however, I have a component that wraps a markdown table in…
Follow is my content of index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); App.js1 import Button from '@mui/material/Button'; function App() { return <Button variant="contained">Button</Button> }…
So basically I have a list of objects like this: const objects = [{name: 'some name', count: 'how many of that name'}, ...] And I'm trying to render them like this: {objects.map((item) => ( <Grid item key={item.name} xs={2} style={styles.count}> <Typography…
I have this wrapper component for the mui Tooltip component with the added functionality that it automatically closes the tooltip when the table around it is being scrolled. The code works well but I want to improve the code quality…