使用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__wrappertestingWidthLimit

const useStyles = makeStyles({

    testingWidthLimit: {

      "& .react-date-picker__wrapper": {

        minWidth: 180,

      }

    },

};

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

const useStyles = makeStyles({

    testingWidthLimit: {

      minWidth: 180,

      "& .react-date-picker__wrapper": {

        minWidth: 180,

      }

    },

};