title: How to add a margin to a datetime picker component?
body: <p>Two date pickers positioned side by side. I am trying to give <code>marginRight</code> after 1st date picker.</p>
  <p>// app.js</p>
  <pre><code>import * as React from &quot;react&quot;;
  import TextField from &quot;@mui/material/TextField&quot;;
  import AdapterDateFns from &quot;@mui/lab/AdapterDateFns&quot;;
  import LocalizationProvider from &quot;@mui/lab/LocalizationProvider&quot;;
  import DateTimePicker from &quot;@mui/lab/DateTimePicker&quot;;
  
  export default function BasicDateTimePicker() {
    const [value, setValue] = React.useState(new Date());
  
    return (
      &lt;div&gt;
        &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
          &lt;DateTimePicker
            renderInput={(props) =&gt; &lt;TextField {...props} /&gt;}
            label=&quot;DateTimePicker&quot;
            value={value}
            onChange={(newValue) =&gt; {
              setValue(newValue);
            }}
            sx={{ '&amp; .MuiOutlinedInput-root': {
              mr:5
            } }}
          /&gt;
        &lt;/LocalizationProvider&gt;
        &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
          &lt;DateTimePicker
            renderInput={(props) =&gt; &lt;TextField {...props} /&gt;}
            label=&quot;DateTimePicker&quot;
            value={value}
            onChange={(newValue) =&gt; {
              setValue(newValue);
            }}
          /&gt;
        &lt;/LocalizationProvider&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>how to add a margin or padding after a date picker?
  <code>sx={{ '&amp; .MuiOutlinedInput-root': { mr:5 } }}</code></p>
  <p>is showing no effect.</p>
  <p>codesandbox url for this code is <a href="https://codesandbox.io/s/aged-morning-jzhkd?file=/src/App.js:0-1120" rel="nofollow noreferrer">https://codesandbox.io/s/aged-morning-jzhkd?file=/src/App.js:0-1120</a></p>