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"

Относительно ширины - узла, со стилевым компонентом, к которому вы хотите подключиться установите px по ширине:

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

А вот обновленные коды и поле: https://codesandbox.io/s/styled-material-ui-search-box-example-4mpoc