Material-ui, как сделать текстовое поле поиска расширяемым в таблице материалов

Question

Я использую material-table , и я хочу, чтобы текстовое поле поиска расширялось, как в этом примере . Но я не могу понять, как изменить стиль для этого текстового поля.

Моя таблица

Я пробовал что-то подобное, но не работает ..

options={{
                searchFieldStyle: {
                    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%',
                    [theme.breakpoints.up('sm')]: {
                        width: '12ch',
                        '&:focus': {
                            width: '20ch',
                        },
                    },
                }
            }}

Answer 1

Параметр searchFieldStyle в порядке MaterialTable options.

Теперь из-за того, что вы не предоставили весь код, я не могу предположить, что вы правильно импортировали theme в свой компонент. В будущем, пожалуйста, укажите количество кода для минимального рабочего варианта, лучше добавьте рабочую песочницу / скрипку.

theme можно использовать в компоненте, используя хук useTheme из Material- Пользовательский интерфейс читать дальше ЗДЕСЬ

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

....

const theme = useTheme();

Теперь, когда вы передаете стиль в searchComponent MaterialTable, вы не можете использовать style и breakPoints, как в JSS это встроенный CSS ,

Таким образом, чтобы использовать медиазапросы, вам нужно использовать хук useMediaQuery, читайте подробнее ЗДЕСЬ

Кроме того, чтобы сделать стили на основе точек разрыва, лучше, если мы создаем отдельную переменную для стилей.

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,
}}

Как вы можете увидеть правило разрыва theme.breakpoints.up("sm") с помощью useMediaQuery и измените переменную customStyle.

The one вы не можете использовать псевдо :focus, поскольку React не поддерживает встроенные псевдоэлементы css.

Также, даже если вы добьетесь фокусировки, это не принесет вам пользы из-за того, что searchFieldStyle стилизует родительский div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd". Если вы сконцентрируетесь на фактическом элементе ввода, он не сработает на вашем контейнере Mui- Root

Я также создал рабочую песочницу, которую вы можете проверить ЗДЕСЬ

Единственное жизнеспособное решение, если вы хотите использовать переход, это создать свой собственный ввод, переопределить <ToolbarComponent>, как показано ЗДЕСЬ в примере. После этого создайте собственную функцию фильтрации данных и передайте ее в таблицу