如何在 react-admin 的创建按钮上制作图标“+”？

Question

I have some problem with default view of button create. When the screen is more than 900px width we will see button create with label "CREATE". When the screen is less than 900px we will see button create as icon "+". I'd like to see button create as icon "+" all the time. Please, help.

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

Haven't tried this myself but you could try to create your own custom button because the Create label is on the CreateButton by default:

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