Таблица material-ui-next превышает ширину контейнера и не может быть прокручена - PullRequest
Новая
       41

Таблица material-ui-next превышает ширину контейнера и не может быть прокручена

0 голосов
/ 04 июня 2018

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

Я столкнулся с проблемой, которую пытался найти, но безуспешно.

Таблица превышает границы компонентов

Структура такова 

return (
            <Paper>
                <Fragment>
                    <CommonToolbar reload={getAnns} />
                    <Typography variant="title">Announces</Typography>
                    <Table className={classes.table}>
                        <TableHead>

стили определяются следующим образом 

const styles = {
    root: {
        flexGrow: 1,
        padding: 10,
        margin: 10
    },
    flex: {
        flex: 1,
    },
    input: {
        marginRight: 10
    },
    select: {
        marginRight: 10
    }
}

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

Любая подсказка будет оценена.Спасибо

С уважением

1 Ответ

0 голосов
/ 25 июня 2018

Можете ли вы попробовать добавить overflowX: "auto" в свой бумажный контейнер?

JSX: 

return (
            <Paper className={classes.paperContainer}>
                <Fragment>
                    <CommonToolbar reload={getAnns} />
                    <Typography variant="title">Announces</Typography>
                    <Table className={classes.table}>
                        <TableHead>

Ваши стили: 

const styles = {
    root: {
        flexGrow: 1,
        padding: 10,
        margin: 10
    },
    flex: {
        flex: 1,
    },
    input: {
        marginRight: 10
    },
    select: {
        marginRight: 10
    },
    paperContainer: { margin: "10px", overflowX: "auto" }
}
...