Why is my image aligned center, but not justified? im confused.. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow: 1, }}> <Container maxWidth="sm"> <img src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png" width={200} alt="img" /> <LinearProgress sx={{ mt: 4 }} /> </Container> </Box>
I have an app built with React.js and Material UI, and have issue with the background color for auto-complete fields. It adds white background which isn't necessary. But when I add text manually, this doesn't happen: <TextField type={props.type ? props.type…
In my nextjs project [v13, pages directory] I tried to add the following animation to my hero component, but for some reason I'm getting a static emoji instead of a waving animation This is my WavingHand component : import {…
demo link: https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx I want to hide a sticky div when I reached the buttom of a parent div while scrolling down. this is a code example of how I set a parent div and the sticky div <Box sx={{…
I am creating a form within a dialog box, but when I use the date picker and attempt to select a date, it disappears and breaks, making the last days of the calendar inaccessible. You can see an example of…
I had a question regarding breakpoints when dealing with responsiveness. I'm using Material UI, which has breakpoints at which you can enable different CSS styles. These are predefined, like xs, xl, md, etc.. I want to set breakpoints at custom…
<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={"ja"} localeText={jaJP.components.MuiLocalizationProvider.defaultProps.localeText}> <DatePicker {...field} label="testlabel" slotProps={{ textField: { variant: "outlined", name: "testDate" }, toolbar: { hidden: true }, }} /> </LocalizationProvider> with the code above, I get this ↓ Does anyone know how I can change '6 2023'…
Currently I'm trying to apply the styling of TableHead to TableRow as well but I'm getting Warning: validateDOMNesting(...): cannot appear as a child of . how to fix this without warning message. CollapisbleTableRow.js import React, { Fragment, useCallback } from…
Langage used : javascript with react, redux toolkit and mui Problematic : I am trying to set all checkbox selected from different datagrid to one state What I have tried and done : I tried to set first the checkbox…
I want to make validation for numbers with scientific notation ('e', '+', '-', '.') using regex i tried some of but that's not working like Regular Numbers /^(0|[1-9]d*)(e-?(0|[1-9]d*))?$/i Whole positive and negative number regex validation, supports numbers like -6e4, -16e-10,…