material-ui를 사용하여 자식 클래스 속성 재정의

Question

이것이 내 첫 번째 질문이므로 올바르게 설명하기를 바랍니다.

datepicker 요소를 가져 왔고 다음을 수행하여 클래스 속성을 재정의하려고합니다.

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

const { testingWidthLimit } = useStyles();

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

내 스타터 평판으로 인해 사진을 게시 할 수 없지만 다음은 화면에 렌더링되는 것입니다.

<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>

오 클래스 "react-date-picker__wrapper"재산 "min-width: 264px"은 아직 거기에

보시다시피 내가 아는 모든 속성을 시도했지만 여전히 자식 속성을 재정의하지 않을 것입니다. InputDate 코드에 대한 액세스 권한이 없어 사용해야합니다.

나는! important (다른 질문에서 본 것처럼 공백이 있든 없든)와 한 번에 하나의 속성을 사용해 보았지만 여전히 작동하지 않습니다. 누구 내가 무엇을 놓치고 있는지 말해 줄 수 있습니까?

Edit1 : 첫 번째 div에서 내 클래스가 적용되고 모든 속성이! important 태그와 함께 있습니다.

Answer 1

다음은 CSS 클래스로 요소 min-width의 react-date-picker__wrapper하위 항목 을 재정의하는 데 필요한 구문입니다 testingWidthLimit.

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

min-width하위 항목과 testingWidthLimit요소 자체 에 설정해야하는 경우 다음을 원할 것입니다.

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

관련 문서 :

• 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