#react-admin
#react-admin
Вопрос:
в React-Admin я хочу ограничить ширину столбцов, отображающих редактирование, показывать кнопки в datagrid
Я знаю, что могу использовать стили для установки ширины других ячеек, таких как текстовые поля, но не могу найти способ сделать это с помощью кнопок
Ответ №1:
Внутри Datagrid
вы можете использовать headerClassName
cellClassName
реквизиты для оформления как ячейки в строке заголовка, так и в строках тела, как описано в документации в разделе Datagrid / CSS-Api
<ShowButton
headerClassName={classes.hiddenOnSmallScreens}
cellClassName={classes.hiddenOnSmallScreens}
/>
* РЕДАКТИРОВАТЬ
Очевидно, что этот подход не работает при использовании typescript, возможно, ошибка — вы можете обойти это таким образом:
const usePostListActionToolbarStyles = makeStyles({
toolbar: {
alignItems: "center",
display: "flex",
marginTop: -1,
marginBottom: -1
}
});
const PostListActionToolbar = ({ children, ...props }) => {
const classes = usePostListActionToolbarStyles();
return (
<div className={classes.toolbar}>
{Children.map(children, (button) => cloneElement(button, props))}
</div>
);
};
а затем внутри вашей Datagrid:
<Datagrid>
//...fields
<PostListActionToolbar>
<ShowButton/>
<EditButton/>
</PostListActionToolbar>
</Datagrid>
Комментарии:
1. Спасибо Киа Каха, но я не собираюсь стилизовать текстовые поля, а такие поля кнопок, как <showButton /> <EditButton />
2. Я скопировал вам пример из документации. Этот подход работает с любым типом столбца Datagrid, который вы стилизуете, будь то поле, кнопка или что-то еще. Пожалуйста, сначала прочтите раздел документации, на который я ссылался.
3. Спасибо, это не тот тип, который распознается для кнопок в TypeScript. Я получаю следующее: «ype ‘{ headerClassName: string; }’ не может быть присвоен типу ‘IntrinsicAttributes amp; Props amp; Props»
4. Я вижу, ознакомьтесь с обновленным ответом — если это также не решает вашу проблему, возможно, вам следует запустить проблему на github, потому что первый подход отлично работает в обычном js, и определения ts пропускают его по ошибке.