Не удалось удалить заполнение из материала-панель вкладок пользовательского интерфейса

#css #material-ui

Вопрос:

У меня есть это TabPane :

Я пытался удалить обивку. Согласно некоторым ответам на SO, это то, что мне нужно сделать:

   <TabPanel
      value={value}
      index={i}
      classes={{
        "amp; .MuiBox-root": {
          padding: "0px",
        },
      }}
    >

Но это не возымело никакого эффекта.

Когда я просмотрел страницу, я обнаружил, что мне пришлось удалить MuiBox-root-9 , чтобы удалить заполнение. Удаление MuiBox-root не возымело никакого эффекта:

 <div class="MuiBox-root MuiBox-root-9">

И я не знаю, как ориентироваться на этот класс MuiBox-root-9 .

1. Привет, не могли бы вы уточнить, какую версию пользовательского интерфейса материала вы используете?

2. Как бы то ни было, я обновил codepen (MUI v5), который использует новый Styled api от MUI, представленный в V5. Вот демонстрация codesandbox с использованием MUI v4. в MUI v4 я нацелился на класс, предоставляемый API Tabpanel, чтобы добавить стиль из более высоких классов в DOM.

3. То, как вы стилизуете, используя поддержку классов classes={{ "amp; .MuiBox-root": {padding:"0px", }, }} , не сработает. Чтобы создать стиль с помощью classes реквизита, вам нужно передать объект, содержащий ключи, соответствующие имени правила css, содержащие ключ класса. Вы можете просмотреть доступные имена правил для конкретного компонента в разделе API в документах. Например, это API вкладки , отображающий доступные имена правил для компонента вкладки

Ответ №1:

если я не ошибаюсь TabPanel , это компонент, который вы создали, а не из материала, поэтому, если вы следуете этому примеру.

 function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index amp;amp; (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

вы можете просто удалить sx={{ p: 3 }} , чтобы ваша панель не имела padding .