javascript - 使用 material-ui 覆盖子类属性

Question

这是我的第一个问题，所以我希望能正确解释。

我已经导入了一个日期选择器元素，我试图通过执行以下操作来覆盖类属性:

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

下面是您需要使用 testingWidthLimit 覆盖元素的 react-date-picker__wrapper 后代的 min-width 的语法CSS 类:

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

如果您需要在后代和 testingWidthLimit 元素本身上设置 min-width，那么您需要以下内容:

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