Material-ui: [Сетка] Дополнительная ширина контейнера и полосы прокрутки

Я обнаружил ту же проблему на flexboxgrid . Я думаю, что это ограничение нашего решения с отрицательной маржой, которое реализует интервал.
Я проверил, что делает бутстрап, у них нет этой функции интервалов, поэтому с их стороны нет проблем.

Итак, у вас есть 3 доступных обходных пути:

• Не используя функцию интервалов и реализуя ее в пользовательском пространстве spacing={0} , мы могли бы сделать это поведением по умолчанию.
• Добавление отступа к родительскому элементу, по крайней мере, со значением интервала: https://codesandbox.io/s/WnpKlQ32n

    <div style={{ padding: 20 }}>
      <Grid container spacing={40}>

• Добавление overflow-x: hidden; к родительскому элементу.

Я закрываюсь, так как не могу придумать лучшей альтернативы. Если у кого-то есть лучшее решение для функции интервала, пожалуйста, повысьте голос :).

Мне кажется, что spacing={0} должно быть поведением по умолчанию. По крайней мере, до тех пор, пока не появится лучшее решение, потому что это кажется ошибкой с <Grid /> для начинающих пользователей material-ui.

@hboylan В свете всех проблем, связанных с этим ограничением, я начинаю задаваться вопросом! Хотелось бы, чтобы у нас был доступ к аналитике использования API 📈.

Я добавил тег waiting for users upvotes . Я не уверен, что люди предпочли бы иметь spacing={0} . Так что, пожалуйста, проголосуйте за этот вопрос, если да. Мы будем расставлять приоритеты в зависимости от количества голосов.

Как минимум 8 повторяющихся проблем - сильный сигнал. Я добавлю примечание об этом ограничении в документации.

Просто интересно: есть ли какие-либо предостережения при использовании второго описанного вами обходного пути ?

Если нет, вы могли бы добавить это в Grid-container-Component по умолчанию?

Обновить:
=> глупый я;) конечно: мы теряем место, извините.

Я не могу исправить это в material-ui @ next, используя spacing={0} в контейнере, или любое из двух других решений, включая overflowing-x и тому подобное. Может я что-то упускаю?

flexboxgrid (который, по словам @oliviertassinari, имеет те же проблемы), имеет вилку, которая утверждает, что исправила ее. https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 Я не копался в коде, но, возможно, стоит изучить, есть ли что-то, что мы можем использовать в Grid.

Привет,

Недавно мы начали использовать эту библиотеку для одного из наших проектов.

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

По сути, это ошибка, которая закрыта без обходных путей в последней версии материала. Это беспокоит.
Еще большее беспокойство вызывает мысль о том, что вместо исправления этой ошибки мы теперь добавили в документы текст, говорящий об «ограничении».

У вас есть какие-нибудь процедуры относительно ошибок и исправлений? Или все решается на месте?

Это предварительный выпуск 1.0.0:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

Исходя из этого обсуждения, можем ли мы предположить, что предварительная версия 1.0.0 на самом деле содержит намного больше ошибок, чем то, что мы там видим? (например, эта проблема)

Сколько допустимых ошибок в интерфейсе материалов вы, ребята, закрыли на github, и вместо исправления вы добавили текст в документы?

В остальном фреймворк отличный. Немного беспокоят процедуры.

Спасибо, и прошу прощения, если я кого-то обидел и / или если я был немного силен.

@kmlx

можем ли мы предположить, что предварительная бета-версия 1.0.0 действительно содержит намного больше ошибок, чем то, что мы там видим?

Вы, конечно, должны (см .: Проблемы ). И вы должны ожидать, что 1.0.0-rc.x тоже будет содержать ошибки, но API будет в основном стабильным.

Сроки @ryanflorence «s чирикать совершенен.

Прошу прощения, если я кого-то обидел и / или если я был немного силен.

Если вы знаете, что кажетесь немного сильным, не извиняйтесь; переосмыслить, что вы хотите сказать и как вы хотите это сказать. (И, возможно, посмотрите, какую ценность вы получили от открытого исходного кода по сравнению с тем, сколько вы внесли, и решите, имеет ли ваша жалоба какой-либо вес.)

Еще лучше, если обходные пути, указанные в документации, недостаточны, придерживайтесь CSS и посмотрите, сможете ли вы устранить ограничение, которое вас беспокоит.

@mbrookes

Спасибо, что нашли время ответить.

Вы, конечно, должны (см .: Проблемы). И вы должны ожидать, что 1.0.0-rc.x тоже будет содержать ошибки, но API будет в основном стабильным.

Рад слышать, что API будет в основном стабильным. Как и в любом другом проекте, я предполагаю, что будут различные неоткрытые проблемы.

Тем не менее, на данный момент обходные пути для этой проблемы не работают, и сама проблема закрыта.
Согласно вашему предыдущему сообщению, эта вилка flexboxgrid может предоставить решение.
Я предполагаю, что коммиты, начинающиеся с 1 августа, - это те, в которых нужно искать исправление.

Если задокументированные обходные пути больше не работают (в настоящее время я использую мобильный телефон, поэтому не могу протестировать), эту проблему необходимо открыть повторно.

Спасибо, что нашли решение.

У меня нет проблемы, кстати, и мое решение заключалось в том, чтобы вручную сделать spacing={0} в каждом компоненте <Grid container /> или <Grid item container /> в моем коде.

@kmlx Я успешно протестировал предлагаемые обходные пути с помощью beta.22. Не стесняйтесь сообщать, если найдете постоянное решение.

Я добавил spacing={0} но на самом деле мне нужен интервал, поэтому я добавил отступы и сделал его только над средней точкой останова, где были показаны два столбца:

const styles = theme => ({
  dividerRight: {
    [theme.breakpoints.up('md')]: {
      paddingRight: theme.spacing.unit * 0.5
    }
  },
  dividerLeft: {
    [theme.breakpoints.up('md')]: {
      paddingLeft: theme.spacing.unit * 0.5
    }
  },
});

Затем я добавил className={classes.dividerRight} в левый столбец (так как разделитель находится справа) и className={classes.dividerLeft} в правый столбец.

Просто была эта проблема. Решил это, добавив следующий CSS в контейнер сетки, и он хорошо выглядит

.grid-container {
  width: 100% !important;
  margin: 0 !important;
}

@martjoao Для меня это привело к нежелательному заполнению внешней части контейнера сетки (у меня есть элементы внутри, которые должны быть на одном уровне с краями).

Моим быстрым и грязным решением было просто бросить overflow-x: hidden; в элемент body. Но в некоторых браузерах (в частности, в мобильных) при прокрутке горизонтальная полоса прокрутки мигает на секунду, указывая пользователю, что они могут прокручивать вправо. Для меня это все еще нежелательно.

РЕДАКТИРОВАТЬ:

Только что видел, как упоминался выше подход переполнения. Виноват.

Я думаю, стоит отметить, что предполагаемое использование <Grid> - это _не_ приложение / основной макет (например, панель приложения, боковая панель, область содержимого и т. Д.). Он действительно предназначен для распределения элементов контента в сетке (например, список профилей). Имея это в виду, имеет смысл размещать элементы с полями, чтобы не затрагивать их область содержимого - чтобы вы могли, например, добавить цвет фона или границы.

Но в документации предлагается использовать элемент <Grid> для основного макета, имея целый раздел с именем «Макет», описывающий использование <Grid> .

Другая причина, по которой многие люди находят это нелогичным, заключается в том, что все другие фреймворки пользовательского интерфейса предоставляют механизм для выполнения первичного макета (который будет считаться случаем 80%, @oliviertassinari), а размещение сетки элементов контента является второстепенной задачей.

Но документация предполагает, чтоэлемент должен использоваться для основного макета, имея целый раздел под названием «Макет», описывающий использование.

@wmadden Почему использование формулировки макета заставляет вас думать, что речь идет о приложении / основном макете?

Еще одна причина, по которой многие люди считают это нелогичным

Что нелогично?

что считается 80% случаем

Согласен, для этого у нас есть: # 10986.

@wmadden Почему использование формулировки макета заставляет вас думать, что речь идет о приложении / основном макете?

Он находится в разделе верхнего уровня, называемом «макет», а не просто в демонстрации компонентов. И формулируя так:

Сетка создает визуальную согласованность между макетами, обеспечивая гибкость для самых разных дизайнов. Адаптивный пользовательский интерфейс Material Design основан на макете сетки из 12 столбцов.

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

Еще одна причина, по которой многие люди считают это нелогичным

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

В React принято считать, что дочерние элементы будут содержаться их родителями. Отрицательная маржа <Grid> нарушает это предположение, выходя за границы своего родителя, что делает его поведение похожим на ошибку для всех, кто не осознает, что это сделано намеренно.

@ vedant1811 Отрицательная граница больше не является поведением по умолчанию. Вы должны иметь возможность использовать сетку без нее для макета уровня приложения.

@oliviertassinari Было ли обновление, которое изменило это? Просто интересно, нужно ли мне обновить мою версию пакета. Раньше я использовал overflow: hidden; для обходного пути родительского элемента.

@saricden Да, не предоставляя свойство spacing , большинство доступных библиотек сеток не имеют этой функции, они позволяют людям обрабатывать поля.

Я только что столкнулся с этим. То, что кажется еще одним хакерским, но нормальным обходным решением, - это установить ширину: 'calc (100% - 16px)' в контейнере сетки ... по крайней мере, для моей ситуации на маленьких экранах.

Игра с разной шириной для разных точек останова может улучшить это, но проблема гораздо менее заметна, когда экран дает более широкий контейнер.

По-прежнему есть та же проблема, но исправлена ​​добавлением xs = {12}.
<Grid container spacing={3} xs={12}>

Эта проблема все еще возникает. Добавление spacing={...} вызывает горизонтальную прокрутку. Добавление xs={12} не решает эту проблему.

_Чего стоит: _
Я столкнулся с этой проблемой с Material-UI 4.5.0. Почему-то я только сейчас замечаю это и использую Material-UI уже больше года.

Я попробовал предложение xs={12} выше в дополнение к стилю полей (потому что я видел дополнительные поля с правой стороны), и следующее визуально дает желаемый эффект:

const useStyles = makeStyles(theme => ({
  grid: { margin: theme.spacing(0) }
}));
...
<Grid container spacing={2} xs={12} className={classes.grid}>

_Однако ..._ Я получаю предупреждение в консоли:

Предупреждение: Неудачный тип опоры: опора xs из Grid должна использоваться в item .

Поэтому вместо использования xs={12} в контейнере я скопировал стили, которые он добавлял, в makeStyles() . Следующее, кажется, пока помогает мне:

const useStyles = makeStyles(theme => ({
  grid: {
    margin: theme.spacing(0),
    flexGrow: 0,
    maxWidth: `100%`,
    flexBasis: `100%`
  }
}));
...
<Grid container spacing={2} className={classes.grid}>

Только maxWidth: 100% сделало эту работу. однако теперь ширина увеличена до максимума. это не сработает, если я установлю конкретное значение maxWidth.

Я исправил это, используя стилизованные компоненты, чтобы установить нулевое поле контейнера Grid.

Контейнер стилизованной сетки:

const GridContainer = styled(Grid)`
  margin: 0;
`;

Теперь GridContainer используется вместо компонента Grid, который генерировал дополнительную ширину.

      <GridContainer
        container
        direction="column"
        justify="center"
        alignItems="center"
        xs={12}
        spacing={2}
      >

Я использовалкомпонент внутри оболочки 100% ширины и высоты, но я столкнулся с этой проблемой, когда контейнер растягивает страницу за пределы 100vw и вызывает горизонтальное переполнение. Я не понимаю, почему для этого используется отрицательная маржа? Мне пришлось переопределить стили по умолчанию, чтобы вернуть страницу в границы:

const NormalizedGridContainer = withStyles(theme => ({
  root: {
    width: '100%',
    margin: '0px',
    padding: `${(spacing/2) * 8}px`
  }
}))(Grid);

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

В размере рабочего стола у меня есть изображения, которые растягиваются в стороны и фиксируются с помощью xs = {12}, и появляются странные отступы. В моем случае исправление похоже на решение @martjoao , но только для мобильной ширины:
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

Я столкнулся с аналогичной проблемой и исправил:

body { margin: 0; padding: 0; }

Закончил делать ниже:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

Это решает проблему.

просто столкнулся с этой проблемой и, глядя на проблемы, связанные с количеством, мне было интересно, есть ли смысл исправить это в material-ui.

Не могли бы мы, по сути, сделать то же самое, что и здесь: https://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec7674495782098fb8e9a2c6d20a2786e1#diff -4b62e0ae269a54df45ab5eab9cb7821b?

Попался в ту же проблему, нашел полуисправление, выполнив

<Container maxWidth={false}>
  <Grid container spacing={3}>
    <Grid item />
  </Grid>
</Container>

По-прежнему есть та же проблема, но исправлена ​​добавлением xs = {12}.
<Grid container spacing={3} xs={12}>

Это исправило это для меня ... спасибо!

По-прежнему есть та же проблема, но исправлена ​​добавлением xs = {12}.
<Grid container spacing={3} xs={12}>

Это исправило это для меня ... спасибо!

Замечательное решение! Это исправило это и для нас. Нам пришлось добавить container item чтобы предотвратить предупреждение контейнера + xs.

проблема решена после добавления overflow-x: hidden ; на родительском элементе, как и внутри контейнера, есть mui-datatable, поэтому в контейнер добавлен overflowX: 'hidden'

Закончил делать ниже:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

Это решает проблему.

Спасибо, для меня это было единственное рабочее решение.

_Похоже_, что у меня работает опускание margin 0 !important

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        // margin: "0 !important"
      }
    },
  }
});

Меня сбивает с толку этот фреймворк с множеством ошибок. Твой

@SomnathKadam

проблема решена после добавления overflow-x: hidden ; на родительском элементе, как и внутри контейнера, есть mui-datatable, поэтому в контейнер добавлен overflowX: 'hidden'

Проблема в том, что вы все еще можете прокручивать. overflow-x: hidden - не лучшее решение

MuiGrid: {
container: {
width: «100%! важно»,
маржа: «0! важно»
}
},
@ rag4214
Это приводит к принудительному изменению структуры всего каркаса и не рекомендуется. Можно починить в одном месте, сломать в другом.

@ manualva7 https://material-ui.com/components/grid/#negative -margin

Я в шоке, я использую MUI около 2 лет и никогда не видел такого раньше. До сих пор не выяснилось, почему это произошло.

Закончил делать ниже:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

Это решает проблему.

Это решение мне подходит.

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

Есть ли исправление?
У меня возникла эта проблема, и я думаю об использовании overflow-x: hidden Что вы думаете?

Проблема все еще существует. Решение overflow-x: hidden свойство родительского элемента

Еще один хак для этого, который у меня работает;)

const useStyles = makeStyles((theme) => ({
 root: {
    '& .MuiGrid-root': {
      width: 'calc(100% - 2px)',
    },
  },
// [...]

эти 2 пикселя, кажется, добавлены где-то под моим определением сетки, поэтому фактическое значение может быть другим для других людей ...