Override child class property using material-ui

Question

This is my first question here so I hope to explain it correctly.

I have imported a datepicker element and im trying to override a class property by doing the following:

const useStyles = makeStyles({
    testingWidthLimit: {
      width: '180px !important',
      minWidth: '180px !important',
      maxWidth: '180px !important',
    },
};

const { testingWidthLimit } = useStyles();

<InputDate
  className={testingWidthLimit}
  {other properties here}
/>

I cannot post a picture due to my starter reputation, but this is what's rendered on the screen:

<div class="sc-gXZlrW ikzFYF makeStyles-testingWidthLimit-3">
  <div class="react-date-picker react-date-picker--closed react-date-picker--enabled">
    <div class="react-date-picker__wrapper">
      (the rest goes here but that is not important)
    </div>
  </div>
</div>

oh the class "react-date-picker__wrapper" the property "min-width: 264px" is still there

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.

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?

Edit1: on the first div, my class is being applied and all of the properties are there with the !important tag.

Answer 1

Below is the syntax you need to override the min-width of the react-date-picker__wrapper descendant of the element with the testingWidthLimit CSS class:

const useStyles = makeStyles({
    testingWidthLimit: {
      "& .react-date-picker__wrapper": {
        minWidth: 180,
      }
    },
};

If you need to set min-width on the descendant and on the testingWidthLimit element itself, then you would want the following:

const useStyles = makeStyles({
    testingWidthLimit: {
      minWidth: 180,
      "& .react-date-picker__wrapper": {
        minWidth: 180,
      }
    },
};

Related documentation:

• https://cssinjs.org/jss-plugin-nested?v=v10.5.0#use--to-reference-selector-of-the-parent-rule
• https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator