使用 material-ui 覆盖子类属性答案

【问题标题】：Override child class property using material-ui使用 material-ui 覆盖子类属性
【发布时间】：2021-03-02 22:48:03
【问题描述】：

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

我已经导入了一个 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 标记。

【问题讨论】：

如果您检查该元素，样式是否应用于该类？
这能回答你的问题吗？ CSS child selector in material ui

标签： javascript reactjs material-ui

【解决方案1】：

以下是使用testingWidthLimit CSS 类覆盖元素react-date-picker__wrapper 后代的min-width 所需的语法：

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,
      }
    },
};