Я хочу переопределить стиль div компонента MenuItem в Material-UI?

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 пикселей ниже элемента над ним, чтобы он не скрывал элемент под ним.

, нокогда я проверяю это и делаю это вручную с элементом div в menuitem, он работает, применяя мои измененные свойства к элементу ul вместо родительского div.см. скриншот ниже.

Answer 1

Эта тема решает проблему :).Если кто-то сталкивается с подобной проблемой, пожалуйста, посетите

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

Answer 2

Я думаю, просто нужно сделать так, добавить больше div и сделать его margin-top

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}
    >
      <div className={classes.root}>
        {options.map(({ label, value }) => (
          <MenuItem key={value} value={value}>{label}</MenuItem>
        ))}
      </div>
    </TextField>
  </form>
);