使用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__wrappertestingWidthLimitconst useStyles = makeStyles({    testingWidthLimit: {      "& .react-date-picker__wrapper": {        minWidth: 180,      }    },};如果您需要min-width在后代和testingWidthLimit元素本身上进行设置，那么您需要以下内容：const useStyles = makeStyles({    testingWidthLimit: {      minWidth: 180,      "& .react-date-picker__wrapper": {        minWidth: 180,      }    },};