CODEWITHSUNDEEP
reactjsmaterial-uistyled-components
marcinb1986
marcinb1986

Reputation: 902

DateTimePicker from Material UI change padding after page reload

I have a issue with DateTimePicker from Material UI. After page reload it loses it's initial padding of 10px for each side. Once component is rendered for the first time it looks like: enter image description here

Once I reload the page it looks like:

enter image description here

I have inspected it in dev tools and it's this element: enter image description here

And I found in dev tools 2 classes where I change padding to 10px ( in dev tools ) it works perfectly .MuiInputBase-input .MuiInputBase-root

But once I put those valuse into the code it doesn't work.

export const StyledDateTimePicker = styled(DateTimePicker)`
    & .MuiInputBase-root {
        padding: 10px;
    }

    & .MuiInputBase-input {
        padding: 10px;
    }
`;

Can You please let me know how to apply those props to the input ? I'm using StyledComponentes in the project.

thanks a lot !!!

Upvotes: 0

Views: 298

Answers (1)

Summer
Summer

Reputation: 1301

This is most likely caused by incompatible Mui versions. Try getting rid of @mui/lab and install @material-ui/pickers instead. https://material-ui-pickers.dev/getting-started/installation

Alternatively, migrate all your components to the new version of Mui.

Upvotes: 1

Related Questions