材质ui搜索栏作为样式化组件

Question

我使用这样的材料ui搜索栏，它运行良好：

<SearchBar
style={{
margin: '0 auto',
maxWidth: 800,
}}
/>

然而，当我将其更改为样式组件时，样式无法正常工作，搜索栏会扩展到整个屏幕。

export const StyledSearchBar = styled(SearchBar)`
margin: 0 auto;
max-width: 800;
`;

我还尝试过使用maxWidth。我该怎么解决这个问题？

由于MUI主题错误，我无法创建沙盒。

Answer 1

material-ui-search-bar需要material-ui1.0或更高版本
您需要以下依赖项才能使代码工作：

"@material-ui/core": "4.9.11",
"@material-ui/icons": "4.9.1",
"material-ui": "1.0.0-beta.47",
"material-ui-search-bar": "1.0.0-beta.14",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"styled-components": "5.1.0"

关于带有样式组件的width-node，您需要在width上设置px：

export const StyledSearchBar = styled(SearchBar)`
margin: 0 auto;
max-width: 800px;
`;

下面是更新后的codesandbox：https://codesandbox.io/s/styled-material-ui-search-box-example-4mpoc