material-ui-search-bar 作为样式化组件答案

【问题标题】：material-ui-search-bar as Styled Componentmaterial-ui-search-bar 作为样式化组件
【发布时间】：2020-08-01 00:20:51
【问题描述】：

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

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

但是，当我将其更改为样式组件时，样式无法正常工作，并且搜索栏会延伸到整个屏幕。

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

我也尝试过使用maxWidth。我该如何解决这个问题？

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

【问题讨论】：

请使用codesandbox.io添加一个工作示例
我试过但无法创建一个。我没有收到错误 - 代码非常简单 @Dekel codesandbox.io/s/elegant-williams-24en2?file=/src/App.tsx
你指的是material-ui-search-bar库吗？有没有办法在codesandbox中使用它？ @keikai
是的，我已经在使用它了。搜索栏工作正常。但是，如果我尝试将内联样式移动到样式化组件样式中，则该部分无法正常工作。 @keikai
@keikai 检查我的答案，它解释了一切。

标签： javascript css reactjs styled-components

【解决方案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

【讨论】：

这是丢失的像素！
确实如此。现在你明白了创建一个有效的例子是多么重要。我花了更多的时间来修复你的代码框，而不是找到丢失 px 的问题 :)
@Dekel 干得好。顺便问一下，你觉得这个版本问题值得讨论吗？
material-ui 组件（旧组件）已弃用，这也意味着 material-ui-search-bar 可能也没有真正维护（上次发布于 2 年前）。我认为使用最新的软件包要好得多。如果这是我的决定 - 我会放弃使用 material-ui-search-bar 并使用 material-ui/core 提供的组件
搜索栏有哪些选择？我在 /core 中找不到任何相关内容