Привет, я использую следующий отзывчивый ящик материала ui, когда у основного содержимого есть много элементов, у которых отсутствует правая граница.
Я только что скопировал пример адаптивного ящика https://material-ui-next.com/demos/drawers/
@SamLau Я изменил его высоту: «100%», но у меня такая же ситуация.
Можно попробовать 100vh
Не меняет всего.





Это простое решение. Измените высоту класса root. По умолчанию он установлен на 430, так что он помещается на демонстрационной странице документации.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from '@material-ui/icons/Menu';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';
const drawerWidth = 240;
const styles = theme => ({
root: {
flexGrow: 1,
//CHANGE THIS TO WHATEVER HEIGHT e.g. '100%'
height: 430,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex',
width: '100%',
},
....
});
class ResponsiveDrawer extends React.Component {
state = {
mobileOpen: false,
};
handleDrawerToggle = () => {
this.setState({ mobileOpen: !this.state.mobileOpen });
};
render() {
const { classes, theme } = this.props;
const drawer = (
<div>
<div className = {classes.toolbar} />
<Divider />
<List>{mailFolderListItems}</List>
<Divider />
<List>{otherMailFolderListItems}</List>
</div>
);
return (
<div className = {classes.root}>
...
</div>
);
}
}
ResponsiveDrawer.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
Я изменил его высоту: «100%», но ситуация такая же.
Добавьте JSFiddle, и я посмотрю, смогу ли я вам помочь. Но вы можете проверить элемент с помощью инспектора браузера, вы можете попробовать добавить свойство height в класс j137:
Без собственности:
Со свойством heigth
Можете ли вы отредактировать свой ответ и рассказать, как добавить свойство высоты в класс j137?
Класс, созданный демо-версией Mui, отличается от вашего локального className, поэтому вы не найдете j137 className в своем локальном приложении. С помощью веб-инспектора вы сможете проверить тот же фрейм, что и в следующих примерах. Вам необходимо заменить div на style или className в вашем коде
См. material-ui-next.com/customization/overrides, чтобы переопределить панель приложений и добавить свойство height.
Проверьте свойство стиля
heightклассаrootclassName