How do I prevent mui x-date-picker from being cutoff? - reactjs

https://codesandbox.io/s/react-mui-forked-fpt0xl?file=/index.js
I'm trying to create a simple draggable dialog as shown above. The issue I'm having is that the label for the datepicker element is being cut off for some reason. I understand that I could style my way out of this, but I am trying to understand why the default stylings for MUI lead to this odd behavior. Full code for this component included below, working example demonstrating the problem above.
import * as React from 'react';
import Button from '#mui/material/Button';
import Dialog from '#mui/material/Dialog';
import DialogActions from '#mui/material/DialogActions';
import DialogContent from '#mui/material/DialogContent';
import { AdapterLuxon } from '#mui/x-date-pickers/AdapterLuxon';
import { DesktopDatePicker } from '#mui/x-date-pickers';
import { LocalizationProvider } from '#mui/x-date-pickers';
import { FormControl, InputLabel, Input, FormHelperText } from '#mui/material';
import DialogTitle from '#mui/material/DialogTitle';
import Paper, { PaperProps } from '#mui/material/Paper';
import Draggable from 'react-draggable';
import TextField from '#mui/material/TextField';
import { DateTime } from 'luxon';
function PaperComponent(props: PaperProps) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
export default function DraggableDialog() {
const [postDate, setPostDate] = React.useState<DateTime | null>(
DateTime.now()
);
return (
<Dialog
open={true}
onClose={() => {}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
Add Story
</DialogTitle>
<DialogContent>
<FormControl>
<InputLabel htmlFor="story-title">Title</InputLabel>
<Input id="story-title" aria-describedby="story-title-text" />
<FormHelperText id="story-title-text">Enter title</FormHelperText>
</FormControl>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<DesktopDatePicker
label="Date"
renderInput={(props) => <TextField {...props} />}
value={postDate}
onChange={(newValue: DateTime | null) => {
setPostDate(newValue);
}}
/>
</LocalizationProvider>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={() => {}}>
Cancel
</Button>
<Button onClick={() => {}}>Add Story</Button>
</DialogActions>
</Dialog>
);
}

https://github.com/mui/material-ui/issues/34113
I raised this issue with the MUI team after realizing that the culprit code is something that assigns the first child of most containers (like DialogContent) a margin: 0 property. The label, in this example works by animating its position into that margin area, which for every other element is either 1.0 or 1.5em for the top, but for the first it isn't- it's 0. The recommendation from the repo managers was to style the first element with a local sx={{margin-top: 1.5}} as changing the default behavior would likely break many other designs and this isn't too intrusive.

Related

DatePicker MUI how to display "Clear" text on the left side of the calendar

I have DesktopDatePicker from material-ui(version 5.0.0) and like to display "Clear" text on the left side of the calendar.
import * as React from "react";
import dayjs from "dayjs";
import TextField from "#mui/material/TextField";
import { AdapterDayjs } from "#mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "#mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker } from "#mui/x-date-pickers/DesktopDatePicker";
export default function ResponsiveDatePickers() {
const [value, setValue] = React.useState(dayjs("2022-04-07"));
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DesktopDatePicker
label="For desktop"
value={value}
minDate={dayjs("2017-01-01")}
onChange={(newValue) => {
setValue(newValue);
}}
componentsProps={{
actionBar: { actions: ["clear"], position: "left" }
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
I added position:"left" in actionBar but this didn't work.
Since it is justified by a flexbox, you will need to add justifyContent: "flex-start" to your action bar style properties.
eg:
componentsProps={{
actionBar: { actions: ["clear"], style: {justifyContent: "flex-start"} }
}}
To further answer the question in the comment, since MUI components all give you access to styling I tried it and it worked - this is the MUIv4 way to access styling and it appears that it still works. The MUIv5 way to do it would likely be to access styling through the sx property that the components now have.
componentsProps={{
actionBar: { actions: ["clear"], sx: {justifyContent: "flex-start"} }
}}
All MUI components give access to styling with the sx property.

How to custom title of weekday of Material-ui DateRangePicker

I spend almost half day but can't not found any solution to customize the title of week day of Material-ui DateRangePicker. Instead of "S", "M",..., I want to show the title as I expected.
Already tried to custom the dateAdapter but this not helps.
I see that Material-ui has component called MuiPickersUtilsProvider which I can customize the day title as I want but this component not support date-range picker.
I would highly appreciate any advices. Here is my code so far:
import * as React from 'react';
import TextField from '#mui/material/TextField';
import AdapterDateFns from '#mui/lab/AdapterDateFns';
import LocalizationProvider from '#mui/lab/LocalizationProvider';
import Box from '#mui/material/Box';
import MobileDateRangePicker from '#mui/lab/MobileDateRangePicker';
export class CustomDateFns extends AdapterDateFns {
getWeekdays() {
return ['AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG'];
}
}
export default function ResponsiveDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
return (
<LocalizationProvider dateAdapter={CustomDateFns}>
<MobileDateRangePicker
inputFormat="dd/MM/yyyy"
startText="Start date"
endText="End date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
clearable={!!value[0] && !!value[1] ? true : false}
clearText="Reset"
cancelText=""
okText="Confirm"
toolbarTitle=""
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
);
}
Here is what current it shows:
What I expect is:
The only way I found until now is manipulating the DOM, then set innerHTML. But I don't think this is a good way because we can't control DOM as this is generated by library, not by me.

React button color not changing

My react project button colour set as primary but it it shown red colour. I want to set it as blue or primary colour. How should I do that. (I'm run on a tutorial)
here is my Button.js
import React from 'react';
import {Button as MuiButton} from "#material-ui/core";
export default function Button(props) {
const {text, size, color, variant, onClick}=props
return (
<MuiButton variant={variant} size={size} color={color} onClick={onClick}>
{text}
</MuiButton>
);
}
Then here is the Controls.js
import Button from "./Button";
const Controls = {
Button
}
export default Controls;
here is button my code in the form,
<div>
<Controls.Button variant="contained" color="primary" size="large" text="Submit"/>
</div>

Styled-systems doesn't appear on the web as it does on mobile in react native

Today I started a project with expo and I wanted to use styled-system. I created and used a custom component with the Styled-system. While it looks fine on mobile, styles are not coming on expo web. What is the reason of this?
To show the code I wrote as an example, I wrote the text component and home screen as follows.
This is how it looks on iOS and on the web.
'Text.js
import {Text as T} from 'react-native';
import styled from 'styled-components';
import {compose, color, size, typography, space} from 'styled-system';
const Text = styled(T)(compose(typography, space, color, size));
export default Text;
'Home.js
import React from "react";
import { Text, Input, Box, Button } from "../components/style";
export default function HomeScreen({ navigation }) {
return (
<Box flex={1} justifyContent="center" alignItems="center">
<Text fontSize={21}>Search a movie</Text>
<Input
width="90%"
height={70}
px={20}
fontSize={20}
bg={"#ddd"}
color="black"
mt={10}
placeholder="movie name"
borderRadius="normal"
/>
<Button
width="90%"
mt={30}
bg="0.dark"
height={70}
borderRadius="normal"
onPress={() => navigation.navigate("Details")}
>
<Text color="0.light" fontWeight="bold" fontSize={18}>
Ara
</Text>
</Button>
</Box>
);
}
I solved, you have to use 'styled-components/native'

Material UI upload button showing no file chosen

I am trying to use one of the MU upload buttons with ReactJS, with the exact code from the official page (4th button, with the icon): https://material-ui.com/components/buttons/#upload-button
I've imported all the needed dependencies, and my React code for this button is as follows:
import { makeStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import PhotoCamera from "#material-ui/icons/PhotoCamera";
import "./SignUp.css";
const useStyles = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
}
}
}));
function SignUp() {
const classes = useStyles();
return (
<label htmlFor="icon-button-file">
<IconButton
color="primary"
aria-label="upload picture"
component="span"
>
<PhotoCamera />
</IconButton>
</label>
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
However I'm seeing this fairly ugly "Choose file" - no file chosen button. I should only be seeing the camera icon at the bottom.
enter image description here
Could anyone point me in the right direction?
I found the issue. I had forgotten to add this piece of code:
input: {
display: "none"
}
This goes into the useStyles function.
This might help you Link in same way.
import React from "react";
import "./styles.css";
import IconButton from "#material-ui/core/IconButton";
import PhotoCamera from "#material-ui/icons/PhotoCamera";
export default function App() {
return (
<div className="App">
<IconButton>
<PhotoCamera />
</IconButton>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

Resources