Zastąp właściwość klasy potomnej za pomocą material-ui

Nov 19 2020

To jest moje pierwsze pytanie, więc mam nadzieję, że je poprawnie wyjaśnię.

Zaimportowałem element datepicker i próbuję przesłonić właściwość klasy, wykonując następujące czynności:

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

const { testingWidthLimit } = useStyles();

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

Nie mogę opublikować zdjęcia ze względu na moją reputację początkującą, ale na ekranie wyświetla się tak:

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

o klasa, "react-date-picker__wrapper"nieruchomość "min-width: 264px"wciąż tam jest

Jak widać, wypróbowałem każdą znaną mi właściwość i nadal nie zastąpię właściwości podrzędnej. Nie mam dostępu do kodu InputDate i muszę go użyć.

Próbowałem użyć! Ważne (ze spacją lub bez, jak widziałem w niektórych innych pytaniach) i jednej właściwości naraz, ale nadal nie działa, czy ktoś może mi powiedzieć, czego mi brakuje?

Edit1: w pierwszym div moja klasa jest stosowana i wszystkie właściwości są tam oznaczone! Important.

Odpowiedzi

2 RyanCogswell Nov 19 2020 at 23:09

Poniżej znajduje się składnia trzeba przesłonić min-widthtego react-date-picker__wrapperpotomka elementu z testingWidthLimitklasy CSS:

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

Jeśli chcesz ustawić min-widthna potomku i na samym testingWidthLimitelemencie, chciałbyś, aby:

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

Powiązana dokumentacja:

  • 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