问Material-ui如何使搜索文本字段在material-table中展开

EN

在MaterialTable options中，searchFieldStyle参数是正常的。

现在，由于您没有提供完整的代码，所以我不能假定您在组件中正确地导入了theme。在未来请提供最小工作变体的代码量，添加一个工作沙箱/小提琴将更好。

可以使用Material-UI read more HERE中的useTheme钩子在组件中使用theme

import { useTheme } from "@material-ui/core/styles";

....

const theme = useTheme();

现在，当您将样式传递给MaterialTable的searchComponent时，您不能像在JSS中那样使用style和breakPoints，这是内联CSS。

因此，为了使用媒体查询，您需要使用useMediaQuery钩子，请阅读更多HERE

此外，为了使样式基于断点，最好为样式创建一个单独的变量。

import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";

....

const theme = useTheme();
const smUp = useMediaQuery(theme.breakpoints.up("sm"));

let customStyle = {
  padding: theme.spacing(1, 1, 1, 0),
  // vertical padding + font size from searchIcon
  paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
  transition: theme.transitions.create("width"),
  width: "100%"
};

if (smUp) {
  customStyle = {
    ...customStyle,
    width: "24ch",
    color: "red",
    }
  };
}

...

options={{
    ...
    searchFieldStyle: customStyle,
}}

正如您所看到的，使用useMediaQuery和修改customStyle变量来执行断点规则theme.breakpoints.up("sm")。

您不能做的一件事是伪:focus，因为React不支持内联css伪元素。

而且，即使你实现了将焦点放在那里，也不会对你有什么好处，因为searchFieldStyle样式化了父div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd"。如果将焦点放在实际的输入元素上，则不会触发Mui-Root容器上的焦点

我还创建了一个工作沙箱，您可以查看HERE

如果您想要使用转换，唯一可行的解决方案是创建您自己的输入，覆盖示例中显示的HERE所示的<ToolbarComponent>。之后，为数据创建您自己的过滤函数，并将其传递给表