Проблема с переопределением темы Material-UI

Я переопределяю компонент <ExpansionPanelSummary/> в пользовательском интерфейсе материала, чтобы иметь меньшую маржу. Для этого я использую тему с переопределениями.

const theme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      expanded: {
          marginTop: 5,
          marginBottom: 5,
      },
      content: {
        marginTop: 5,
        marginBottom: 5,
      },
    }
  },

Однако проблема, с которой я столкнулся, заключается в том, что в Material-UI, встроенном в css, одновременно применяются два класса: содержание и расширенный.

.MuiExpansionPanelSummary-content-567.MuiExpansionPanelSummary-expanded-564 {
  margin: 20px 0;
}

Как я могу переопределить несколько примененных классов? Можно ли для этого создать правило темы?

Хорошо, у меня есть обходной путь, но он все еще не полностью отвечает на мой вопрос. Вместо того, чтобы использовать число 5 в качестве переопределения, я могу использовать «5px! Important», однако это по-прежнему не создает правила, когда используются два класса.

— 09.10.2018 18:14

reactjs styles themes material-ui

09.10.2018 17:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

797

Ответы 1

Получил сегодня это работает. Требуемое поле находится в классе expanded для содержимого, поэтому правила должны выглядеть так, чтобы получить более высокую специфичность CSS. Ищите '&.expanded'.

const useStyles = makeStyles(theme => ({
  expansionPanelSummaryContent: {
    backgroundColor: 'red',
    '&.expanded': {
      margin: 0,
      backgroundColor: 'yellow',
    },
  },
}));

export default function MyComponent(props) {
  const classes = useStyles();
  return (
    <ExpansionPanel expanded = {props.expanded}>
      <ExpansionPanelSummary
        classes = {{
          content: classes.expansionPanelSummaryContent,
          expanded: 'expanded'
        }}
      >
        ...
      </ExpansionPanelSummary>
    </ExpansionPanel>
  );
}

13.11.2019 12:45

Другие вопросы по теме

WPF: пользовательский просмотрщик прокрутки ListView приводит к исчезновению заголовка столбца

Внутренний стиль не работает в этом HTML-коде?

Применение стилей к пользовательским календарям wpf

Как перезаписать стили индекса Wordpress?

Почему React не включает теневой DOM? Разве это не сделало бы жизнь намного проще, чем работа с CSS в JS-решениях?

Как настроить Airbnb ESLint в VS Code?

Черный цвет фона окна при стилизации

Пользовательский стиль пользовательского интерфейса MaterialUI

Цвет заливки рыхлителя JFXButton нельзя изменить

Цвет выделения WPF Change ListView Content (ContentPresenter)

Проблема с переопределением темы Material-UI

Ответы 1

Другие вопросы по теме

Похожие вопросы