Material-UI - адаптивная сетка не изменяется по ширине мобильного - PullRequest
Новая
       13

Material-UI - адаптивная сетка не изменяется по ширине мобильного

0 голосов
/ 06 января 2019

Я изо всех сил пытаюсь добиться правильного изменения ширины страницы, используя жидкостную сетку Material-UI «xs», то есть адаптивный вид для мобильных устройств.

При большей ширине страницы (размер «см») мой тест отображается с ожидаемым заполнением, однако, когда я уменьшаю размер экрана до ~ <700 пикселей, высота карты не увеличивается, а края текста потерян. </p>

Вот пример с отступами по обе стороны от текста:

enter image description here

При уменьшении ширины экрана заполнение не применяется и высота бумаги не увеличивается, поэтому текст справа скрыт:

enter image description here

Вот мой пример кода: 

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const styles = (theme) => ({
  root: {
    flexGrow: 1,
    padding: 20
  }
});

class Test extends React.Component {
  render() {
    const {classes} = this.props;

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
        </Grid>
      </div>
    );
  }
}

export default withStyles(styles)(Test);

Кто-нибудь может посоветовать, как правильно настроить ширину при меньшем размере экрана?

1 Ответ

0 голосов
/ 06 января 2019

Ах, мой плохой. Смущающе я устанавливал минимальную ширину в другом месте в проекте CSS.

Спасибо @Ryan Cogswell за комментарий, урок - тест в ванильной среде;)

...