When I remove cssBaseLine this error goes away but another error comes up.
With cssBaseLine, I get
TypeError: Cannot read properties of undefined (reading 'primary')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
body
file:///node_modules/#mui/material/CssBaseline/CssBaseline.js (43:45)
Here is layout.jsx
import CssBaseline from '#mui/material/CssBaseline';
import { ThemeProvider, StyledEngineProvider } from '#mui/material/styles';
import {lightTheme, darkTheme} from '../components/theme';
import TopAppBar from './ui/topAppBar';
import { useCookies } from 'react-cookie';
import Copyright from '../components/ui/copyright';
import Box from '#mui/material/Box';
const layout = ({ children }) => {
const [cookies, setCookie] = useCookies(['darkTheme']);
return <>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={cookies.darkTheme=="true" ? darkTheme : lightTheme}>
<CssBaseline />
<header>
<nav>
<TopAppBar />
</nav>
</header>
<main>{children}</main>
<Box mt={8} mb={4}>
<Copyright />
</Box>
</ThemeProvider>
</StyledEngineProvider>
</>;
};
export default layout;
Related
can someone explain to me why the following code is executed twice? (See image)
import * as React from 'react';
import Container from '#mui/material/Container';
import Typography from '#mui/material/Typography';
import Box from '#mui/material/Box';
import raw from "./testfile.csv";
function ReadFile(file) {
fetch(raw)
.then(r => r.text())
.then(text => {
console.log('text decoded:', text);
});
}
export default function App() {
return (
<Container maxWidth="sm">
<Box sx={{ my: 4 }}>
<Typography variant="h4" component="h1" gutterBottom>
Create React App example
</Typography>
<ReadFile />
</Box>
</Container>
);
}
executed twice
I don't understand why the code is executed 2x by the browser
Do you have <React.StrictMode> in index.js? It already happened to me that my code executed twice because of that.
Im getting this error with prop type
react.development.js:209 Warning: Failed prop type: Material-UI: overlap="rectangle" was deprecated. Use overlap="rectangular" instead.
import Grid from '#mui/material/Grid';
import { useFormContext, Controller } from "react-hook-form";
import { TextField } from '#mui/material';
export const AddressInput = (name, label, required) => {
const {control} = useFormContext();
return (
<Grid item xs={12} sm= {6}>
<Controller as={TextField}
control={control}
fullWidth defaultValue=""
name={name} label={label}
required={required} />
</Grid>
)
}
I am using MobileDateRangePicker from "#material-ui/lab/MobileDateRangePicker". I am trying to customize it according to my needs. What I am looking for is
When the MobileDateRangePicker opens I need text input view to show first and after that when I click on calendar icon calendar view needs to come. But right now complete opposite is happening. How can I get my requirement.
This is the complete code. Any assistance would be really helpful to me. Thank you.
import * as React from "react";
import TextField from "#material-ui/core/TextField";
import AdapterDateFns from "#material-ui/lab/AdapterDateFns";
import LocalizationProvider from "#material-ui/lab/LocalizationProvider";
import Box from "#material-ui/core/Box";
import Stack from "#material-ui/core/Stack";
import MobileDateRangePicker from "#material-ui/lab/MobileDateRangePicker";
import { Button } from "#material-ui/core";
export default function ResponsiveDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
const [openPicker, setOPenPicker] = React.useState(false);
const handleClick = () => {
setOPenPicker(!openPicker);
};
return (
<div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<MobileDateRangePicker
startText="Start date"
endText="End date"
disableMaskedInput={true}
// open={openPicker}
// disableOpenPicker={true}
showDaysOutsideCurrentMonth={true}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
toolbarTitle="custom date range"
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</Stack>
</LocalizationProvider>
</div>
);
}
sandbox link: https://codesandbox.io/s/responsivedaterangepicker-material-demo-forked-8qws4?file=/demo.js
I know that with an InputField one is able to pass down the variant="filled" prop to get input box filled. However, is it also possible to pass down a prop with the similar effect using a Material UI date picker (not using the native datepicker from the browser)?
Example of filled input:
I think you are looking for inputVariant={"filled"} prop
import "date-fns";
import React from "react";
import Grid from "#material-ui/core/Grid";
import DateFnsUtils from "#date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardTimePicker,
KeyboardDatePicker
} from "#material-ui/pickers";
export default function MaterialUIPickers() {
// The first commit of Material-UI
const [selectedDate, setSelectedDate] = React.useState(
new Date("2014-08-18T21:11:54")
);
const handleDateChange = date => {
setSelectedDate(date);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<KeyboardDatePicker
inputVariant={"filled"}
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date"
}}
/>
</Grid>
</MuiPickersUtilsProvider>
);
}
Working sandbox project link
The #material-ui/pickers has been moved to the #mui/lab.
Checkout the migration guide Here !
Below is a sample code to implement the same
import React from "react";
import TextField from "#mui/material/TextField";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
import DatePicker from "#mui/lab/DatePicker";
export default function filledDatePicker() {
const [selectedDate, setSelectedDate] = React.useState(new Date());
const handleDateChange = date => {
setSelectedDate(date);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
value={selectedDate}
onChange={handleDateChange}
renderInput={(props) => (
<TextField {...props} variant="filled" label="Select Date" />
)}
/>
</LocalizationProvider>
);
}
The RTL demo provided in material ui guides seems does not work for components.
As they said in the Right-to-left guide internally they are dynamically enabling jss-rtl plugin when direction: 'rtl' is set on the theme but in the demo only the html input is rtl and TextField isn't.
Here's the demo code from https://material-ui-next.com/guides/right-to-left/#demo
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
const theme = createMuiTheme({
direction: 'rtl', // Both here and <body dir="rtl">
});
function Direction() {
return (
<MuiThemeProvider theme={theme}>
<div dir="rtl">
<TextField label="Name" />
<input type="text" placeholder="Name" />
</div>
</MuiThemeProvider>
);
}
export default Direction;
Once you have created a new JSS instance with the plugin, you need to
make it available to all components in the component tree. JSS has a
JssProvider component for this:
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '#material-ui/core/styles';
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();
function RTL(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
{props.children}
</JssProvider>
);
}