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

Question

我正在尝试使用样式组件自定义Material-ui Grid组件的props 。 我试图做这样的事情：

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

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

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

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

描述在这里 ，但是这也没有工作。

Answer 1

Material-UI网格中的“ direction”属性定义flex-direction样式属性。
因此，如果要使用样式化组件覆盖该样式，则需要使用flex-direction而不是direction 。 这是一个例子：

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

祝好运。