我想在material-ui中覆盖MenuItem组件的div样式吗？

Question

通过这种方式，我能够以某种方式覆盖菜单项的CSS。

const styles = () => ({
  root: {
    top:65
  },
});

const Picker = ({
  classes, identifier, topLabel, onSelection, options, selectedValue,
}) => (
  <form  autoComplete="off">
    <TextField
      name={identifier}
      select
      label={topLabel}
      value={selectedValue}
      onChange={onSelection}
    >
      {options.map(({ label, value }) => (
        <MenuItem className={classes.root} key={value} value={value}>{label}</MenuItem>
      ))}
    </TextField>
  </form>
);

但现在需要担心的是，生成的输出快照在下面-

第一个ul项目距顶部60像素，但我要把整个div从其上方的元素向下放置60 px，这样它就不应隐藏其下方的元素。

但是当我检查它并手动对menuitem的div元素进行操作时，它正在执行的工作是将修改后的属性应用于ul元素而不是父div。 请参见下面的屏幕截图。

Answer 1

我认为只需要这样做，添加更多div并使其位于页边空白

const data = {"Coupon_Code":"code","Coupon_Name":"namie","Coupon_Desc":1000,"selectedCity":[{"Coupon_City_Name":"xyz"}],"selectedCategory":[{"Coupon_Category_Name":"Shopping"}],"selectedCompany":[{"Coupon_Company_Name":"Shopper Stop"}],"selectedState":[{"Coupon_State_Name":"abc"}],"Coupon_Date":"2222-02-22"};

const result = Object.entries(data)
  .reduce((r, [k, v]) => ({
    ...r,
    ...Array.isArray(v) ? v[0] : { [k]: v }
  }), {});

console.log(result);

Answer 2

此线程解决了问题:)。 如果有人遇到类似问题，请访问

https://github.com/mui-org/material-ui/issues/13042