Как динамически обновлять атрибуты класса нижнего колонтитула модального диалога в antd

Question

Имя класса, определенное antd, равно .ant-modal-footer, в моем css у меня есть что-то вроде ниже.Я хотел бы иметь возможность динамического изменения атрибута position с помощью кода.Я использую React.

Существует свойство bodyStyle, которое я могу динамически обновлять, но я не вижу его для нижнего колонтитула.

Есть идеи?

.ant-modal-footer {
    padding: 14px 30px 30px;
    background: #f0f4f9;

    @media (max-width: 568px) {
      position: fixed;
      width: 100vw;
      overflow: hidden;
      bottom: 0;
    }
  }

Answer 1

Я думаю, вы всегда можете использовать имя класса модала для выбора и изменения стиля нижнего колонтитула.

что-то вроде:

.my-modal-class .ant-modal-footer{
  background: red;
}

, а затем

<Modal className="my-modal-class" />

следует выбратьи измените нижний колонтитул.

также есть wrapClassName prop

Пример: https://codesandbox.io/s/z3jlokmjyl

ПРИМЕЧАНИЕ: в примере я показываю, как изменить весь нижний колонтитулузел, если это просто позиция, которую вы хотите изменить, нижний колонтитул - это ReactNode, вы должны иметь возможность манипулировать позицией