What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link

function InlineDatePickerDemo(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          style={{ padding: "20px" }}
          autoOk
          variant="inline"
          inputVariant="outlined"
          label="With keyboard"
          format="MM/dd/yyyy"
          value={selectedDate}
          InputAdornmentProps={{ position: "start" }}
          onChange={(date) => handleDateChange(date)}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

I'm experiencing issues with reducing the spacing inside the date-picker box despite custom styles not working as intended. I am eager to understand why the styling is ineffective and seek a possible solution to this problem.

Answer №1

To modify the spacing between components inside the picker, you will need to customize the classes within the sub-components rather than styling the parent component. The following classes can be overridden in the sub-components:

const useStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      padding: 0,
      "& .MuiButtonBase-root": {
        padding: 0,
        paddingLeft: 10
      },
      "& .MuiInputBase-input": {
        padding: 15,
        paddingLeft: 0
      }
    }
  }
});
const classes = useStyles();

return (
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
      className={classes.root}
      {...}
    />
  </MuiPickersUtilsProvider>
);

Check out the Live Demo here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...

What could have caused the lack of output from the render function?

I've been working on generating my navigation drawer from JSON data and have everything functioning using components. Now, I'm in the process of refactoring to functions for better performance and to enhance my knowledge of React and JavaScript. ...

Animating elements with CSS keyframes for scaling and translating transformations

I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation. I suspect that this issue is caused by the fixed coordinates of ...

Enhance a disabled button by incorporating a ripple effect

I've got a button that toggles on and off depending on the required form fields. When it's enabled, clicking it activates a ripple effect. Now I'd like to have the ripple effect even when the button is disabled. I attempted something simila ...

Upgrade Material UI from version 3.9.3 to the most recent release available

I recently attempted to update Material UI by following the guidelines outlined on their official website from version 3.9.3 to the most recent release. After running npm install @material-ui/core and npm install react@latest, I encountered an error upon ...

When the section comes into view on the screen, the CSS animation will play only one time

While browsing through , I found some fantastic animations that inspired me. The animations at the header seem to be standard CSS animations with delays. However, as you scroll down and other sections become visible, the animations reappear only once. Can ...

Syncing state seamlessly between server and client using Redux toolkit with Nextjs version 13

Do we need to synchronize the state between the Next.js server and client side when using Redux Toolkit with Next.js 13? For example, on a User Page: If there's a flag isRedirect: false in the Next.js server state, and then the flag is changed to is ...

Tips for arranging two columns and two rows on mobile using Bootstrap 5

I'm currently using bootstrap 5, and I need to display 2 columns and 2 rows on my mobile device, but it's only showing 1 row. I have two PSDs for this layout in desktop mode: https://i.sstatic.net/HWG6e.png And for mobile mode: https://i.ssta ...

Using HTML <style> in a bash script is a great way to enhance

I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...

What is the method for modifying the text color of P tags within a div element?

I'm having trouble changing the text color of the P tags in the card-header section for some reason dashboard.html <div class="container"> <div class="card"> <div class="card-header"> <p& ...

Potential Issue with CSS General Sibling Selector

It seems like I have encountered a potential bug with the General Sibling Selector. When I use p ~ div, the selector does not work as expected. However, when I replace p with the specific class name text_paragraph, it works fine. You can view my code and f ...

What is the process for logging out when a different user signs in using Firebase authentication in a React Native application?

I am new to React Native and facing challenges with managing authentication state in my application. Currently, I am using Redux but have not yet implemented persistence for user login. I have incorporated Firebase authentication. Essentially, I would li ...

Is there a way to customize the timepicker pop-up so that it extends the entire width of the parent form control

<FormControl fullWidth> <LocalizationProvider dateAdapter={AdapterDayjs}> <TimePicker views={["hours", "minutes", "seconds"]} label={t("StrategyManager.Select_Time")} value={timer} ...

What is the best way to locate an item reference for a specific DOM element?

Imagine a vast DOM structure with approximately 10,000 HTML elements, including 1,000 span tags. None of the span elements have any identifiers and are buried deep within other objects with long, complex Xpath paths that are not user-friendly for selectio ...

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

I'm currently developing a webapp dashboard using the latest version of Next.js 13 with app router. It features a dashboard and search bar at the top. I attempted to implement parallel routes. The @search folder contains the search bar and page.jsx wh ...

Multiple instances of CSS linear gradients being shown

I recently added a linear-gradient effect to the CSS of my HTML website. However, I encountered an issue where the gradient was repeating multiple times on the page. Just to provide some context, my website is hosted on nginx, and for server-side renderin ...

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

I've been trying to center a div element with the mouse cursor, following its movement. However, the current code I have offsets the positioned div from the cursor instead of aligning it perfectly. PROCESS The concept behind my code is to display an ...

Encountering an error when attempting to run npm start following the creation of a React app

Whenever I set up a new React application and attempt to run it, an error always pops up: It seems like there might be an issue with the project dependency tree. This is likely not a bug within Create React App itself, but rather something that needs fixi ...

Tips for inserting an HTML element within an exported constant

I need help formatting an email hyperlink within a big block of text. Here is the code snippet: const myEmail = '<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4b564f435e424b6e4b564f435e424b004d41 ...