I need to build a modal component that is opened from a parent component and closed from the modal component itself in React. I'm setting the state in the parent component and passed it down to the child modal component…
I created a custom Alert as shown below, but when I add Snackbar, it is not displaying. Here is the part that I changed, the rest is the same: AlertPopup: const AlertPopup = () => { const { text, type…
I am learning tailwind in react and want to put dynamic value into css using tailwind. I am used to MUI and there its quite simple like <Box sx={{ width: dynamicValue }} /> How do I do such thing in…
Home Component const Home = ({ mode, setMode }) => { return ( <Box m={-1} sx={{overflowX:'hidden'}}> <Navber/> <Stack direction="row" spacing={2} justifyContent="space-between"> <Leftbar/> <Feed/> <Rightbar/> </Stack> </Box> ); }; Leftbar const Leftbar = () => { const styles = { typo:…
I want to to something like this using Material UI (https://i.stack.imgur.com/X0aUV.png) I've used ButtonGroup but I dont know how to change the color of the borders. At this moment I have this:(https://i.stack.imgur.com/Yg3xZ.png) My code: <Grid item lg={4} className={style.navGridCenter}> <ButtonGroup variant='text'…
I use Material Datatable in my React app and want to render the following part conditionally if data is not null or undefined. It is also ok for me not to execute Object.entries(data).map(x => ( line. <TableBody > { Object.entries(data).map(x…
I use Material Multiple select to select employees as shown on the following demo: sandbox demo However, I display id values of the selected employees, but I want to display names of the selected employees. For this purpose, I used…
I'm trying to create a SignUp authentication page with firebase, So when I'm try to type anything in the textfield every time the text field got reset, I cant able to find the problem. But the main problem I found…
I would like to be able to change the label fontSize from the material ui TextField component. I've come up with the InputLabelProps which works great, but as you can see in the picture bellow the label is too squeezy…
At the moment, the button is outputting on the top left corner. How to bring the button to the middle of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</Button> ); } export default App;…