使用样式化组件自定义Material-UI组件

Question

我正在尝试使用样式化组件来自定义用户界面props组件的Grid。我试图做这样的事情：

const NavGrid = styled(Grid)`
    direction: 'row';
`

但是这没有用。因此，我想知道，是否有替代<Grid container direction={'row'}>的方法？我可以使用样式化的组件自定义这些属性，而不是内联吗？

我尝试将props附加到样式组件上，如下所示：

const NavGrid = styled(Grid).attrs({
    direction: 'row'
})``

如here所述，但这也不起作用。

Answer 1

Material-UI网格中的

“方向”属性定义了 flex-direction 样式属性。
因此，如果要使用样式化组件覆盖该样式，则需要使用 flex-direction而不是direction 。 这是一个示例：

const MyGrid = styled(Grid)`
  flex-direction: column;
`

祝你好运。