javascript - 使用 Styled-Components 自定义 Material-UI 组件

Question

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

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

但这没有用。所以，我想知道，除了做 <Grid container direction={'row'}> 还有其他选择吗？ ？我可以使用 styled-components 自定义这些属性而不是在线执行吗？

我尝试附加 props到我这样的样式化组件:

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

描述here , 但这也不起作用。

Answer 1

Material-UI Grid 中的'direction' 属性定义了flex-direction 样式属性。
所以，如果你想使用 styled-components 覆盖那个样式，你需要使用 flex-direction 而不是 direction。这是一个例子:

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

祝你好运。