如何在 react-admin 的創建按鈕上制作圖標“+”？

Question

我對按鈕創建的默認視圖有一些問題。 當屏幕寬度超過 900px 時，我們將看到帶有 label“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>
    );
}

Answer 1

我自己還沒有嘗試過，但是您可以嘗試創建自己的自定義按鈕，因為默認情況下Create label 在CreateButton上：

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

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

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

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

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>
    );
}