javascript - material-ui-search-bar 作为样式组件

Question

我正在使用material-ui-search-bar像这样，效果很好:

<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-ui 版本 1.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"

关于宽度 - 带有样式组件的节点，您需要设置宽度上的像素:

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

这是更新后的代码和框:https://codesandbox.io/s/styled-material-ui-search-box-example-4mpoc