Remplacer la propriété de classe enfant à l'aide de material-ui
C'est ma première question ici, j'espère donc l'expliquer correctement.
J'ai importé un élément datepicker et j'essaie de remplacer une propriété de classe en procédant comme suit:
const useStyles = makeStyles({
testingWidthLimit: {
width: '180px !important',
minWidth: '180px !important',
maxWidth: '180px !important',
},
};
const { testingWidthLimit } = useStyles();
<InputDate
className={testingWidthLimit}
{other properties here}
/>
Je ne peux pas publier une photo en raison de ma réputation de starter, mais voici ce qui est rendu à l'écran:
<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 la classe "react-date-picker__wrapper"
la propriété "min-width: 264px"
est toujours là
Comme vous pouvez le voir, j'ai essayé toutes les propriétés que je connais et je ne remplacerai toujours pas la propriété enfant. Je n'ai pas accès au code InputDate et je dois l'utiliser.
J'ai essayé d'utiliser! Important (avec ou sans espace comme je l'ai vu sur d'autres questions) et une propriété à la fois et cela ne fonctionne toujours pas, quelqu'un peut-il me dire ce que je manque?
Edit1: sur le premier div, ma classe est appliquée et toutes les propriétés sont là avec la balise! Important.
Réponses
Vous trouverez ci-dessous la syntaxe dont vous avez besoin pour remplacer min-width
le react-date-picker__wrapper
descendant de l'élément par la testingWidthLimit
classe CSS:
const useStyles = makeStyles({
testingWidthLimit: {
"& .react-date-picker__wrapper": {
minWidth: 180,
}
},
};
Si vous avez besoin de définir min-width
sur le descendant et sur l' testingWidthLimit
élément lui-même, vous voudrez ce qui suit:
const useStyles = makeStyles({
testingWidthLimit: {
minWidth: 180,
"& .react-date-picker__wrapper": {
minWidth: 180,
}
},
};
Documentation connexe:
- 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