Question

我使用react material ui创建一个侧边栏抽屉，并尝试在侧边栏抽屉样式上创建单击的项目，如本示例http://react-material-dashboard.devias.io/dashboard所示。

我使用https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/drawers/ResponsiveDrawer.js处的代码创建抽屉。

并为活动项添加这样的样式。

const styles = () => ({
  clickedItem: {
    borderLeft: "4px solid #0767DB",
    borderRadius: "4px",
    backgroundColor: "#F6F9FD",
    marginLeft: "10px"
  }
});

但是，由于添加了marginLeft，因此边栏现在可以在x轴上滚动，因为它在右侧增加了额外的空间。我希望它在不影响右侧的情况下增加左侧的边距。我尝试使用overflow: "hidden"。但是，y滚动条也隐藏并且不能滚动。

如何修复它，即使我添加marginLeft，项目大小（宽度）仍保持不变？

Answer 1

我在链接的仪表板上进行了浏览器检查。

尝试在要传递活动元素的样式中添加width:auto;。这将阻止边距被任意添加到固定宽度，并导致溢出。

作为奖励，添加word-break: break-all;可能会有助于避免任何奇异的长词也导致抽屉溢出的情况。

希望这会有所帮助！

如何在不增加父div额外空间的情况下增加边距

1 个答案: