如何在 react-admin 的创建按钮上制作图标 \'+\'？答案

【问题标题】：How can I make icon '+' on create button in react-admin?如何在 react-admin 的创建按钮上制作图标 \'+\'？
【发布时间】：2023-01-18 01:23:33
【问题描述】：

我对按钮创建的默认视图有一些问题。当屏幕宽度超过 900px 时，我们将看到带有标签“CREATE”的按钮创建。当屏幕小于 900px 时，我们将看到按钮创建为图标“+”。我希望看到按钮始终创建为图标“+”。请帮忙。

export function Content() {
    const dataProvider = useDataProvider();
    const sellerId = useSellerId();
    return (
        <Admin dataProvider={dataProvider} layout={CustomLayout}>
            <Resource
                name="seller"
                list={MenuItems}
                create={<CreateMenuItem sellerId={sellerId} />}
                edit={<EditMenuItem sellerId={sellerId} />}
                options={{ label: 'Menu' }}
            />
            <CustomRoutes>
                <Route path="/profile" element={<SellerInfo />} />
                <Route path="/images" element={<ImagesManager />} />
            </CustomRoutes>
        </Admin>
    );
}

【问题讨论】：

假设你说的是List组件中的创建按钮，你可以关注this doc自定义列表动作。查看 CreateButton source code 以获取有关如何制作自己的创建按钮的灵感。

标签： reactjs react-admin

【解决方案1】：

我自己还没有尝试过，但您可以尝试创建自己的自定义按钮，因为 Create 标签默认位于 CreateButton 上：

import { CreateButton, TopToolbar } from 'react-admin';

const CreateMenuItemButton = () => <CreateButton resource="seller" label="" />;

const MenuItemActions = () => (
    <TopToolbar>
        <CreateMenuItemButton />
    </TopToolbar>
);

export const MenuItems = () => (
    <List actions={<MenuItemActions />}>
        ...
    </List>
);

【讨论】：