Как применить ширину, высоту и другие стили к модалу, созданному с использованием пользовательского интерфейса материала в React JS - PullRequest
Новая
       10

Как применить ширину, высоту и другие стили к модалу, созданному с использованием пользовательского интерфейса материала в React JS

0 голосов
/ 26 мая 2019

Я не могу создать модальный материал-интерфейс в моем приложении React. Я мог видеть, что модал рендерит в браузере, но он не всплывает, как модал должен вести себя. Я проверил материал-интерфейс API https://material -ui.com / api / modal / , но не смог найти его полезным. Примечание: я хочу использовать компонент класса, а НЕ функциональный компонент.

Ниже приведен код, который я пробовал,

Вот код песочницы: Код песочницы

index.js 

import React from "react";
import ReactDOM from "react-dom";
import Modal from "@material-ui/core/Modal";
import Typography from "@material-ui/core/Typography";

import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <Modal open={true} aria-labelledby="simple-modal-title">
        <div className="modal-size">
          <Typography variant="h6" id="modal-title">
            My Title
          </Typography>
        </div>
      </Modal>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css 

.App {
  font-family: sans-serif;
  text-align: center;
}
.modal-size {
  width: 50%;
  height: 50%;

  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;

  transform: translate(-50%, -50%);
}

Ожидаемый результат - что-то вроде ниже. Модальное окно должно появиться, как показано ниже.

modal

1 Ответ

0 голосов
/ 26 мая 2019

Добавьте правило CSS position: absolute; или position: fixed; в класс модели. 

.modal-size {
  position: absolute;
  width: 50%;
  height: 50%;

  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;

  transform: translate(-50%, -50%);
}

codesandbox

...