title: Override child class property using material-ui
body: <p>This is my first question here so I hope to explain it correctly.</p>
  <p>I have imported a datepicker element and im trying to override a class property by doing the following:</p>
  <pre><code>const useStyles = makeStyles({
      testingWidthLimit: {
        width: '180px !important',
        minWidth: '180px !important',
        maxWidth: '180px !important',
      },
  };
  
  const { testingWidthLimit } = useStyles();
  
  &lt;InputDate
    className={testingWidthLimit}
    {other properties here}
  /&gt;
  </code></pre>
  <p>I cannot post a picture due to my starter reputation, but this is what's rendered on the screen:</p>
  <pre><code>&lt;div class=&quot;sc-gXZlrW ikzFYF makeStyles-testingWidthLimit-3&quot;&gt;
    &lt;div class=&quot;react-date-picker react-date-picker--closed react-date-picker--enabled&quot;&gt;
      &lt;div class=&quot;react-date-picker__wrapper&quot;&gt;
        (the rest goes here but that is not important)
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>oh the class <code>&quot;react-date-picker__wrapper&quot;</code> the property <code>&quot;min-width: 264px&quot;</code> is still there</p>
  <p>As you can see, I've tried every property I know of and still won't override the child property. I do not have access to the InputDate code and I have to use it.</p>
  <p>I tried using !important (with or without space as I've seen on some other questions) and one property at a time and that is still not working, can anyone tell me what am I missing?</p>
  <p>Edit1: on the first div, my class is being applied and all of the properties are there with the !important tag.</p>