Admin-on-rest技术求助：按钮间距调整与无ID编辑页实现

Hey there! I’ve worked with admin-on-rest quite a bit, and I can help you solve these two technical issues. Let’s break them down one by one:

Admin-on-rest uses Material-UI’s Toolbar component for the button bar at the bottom of forms (like Edit/Create pages), which comes with default left/right padding—this is what’s causing that 20-30px indent you noticed. Here are two reliable fixes:

方法1：通过自定义主题覆盖样式 #

If you already have a custom theme, you can override the default padding for the toolbar directly in your theme configuration. This will apply the change globally to all form toolbars:

import { createMuiTheme } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  overrides: {
    // Override Material-UI's Toolbar base style
    MuiToolbar: {
      root: {
        paddingLeft: 0,
        paddingRight: 0,
        // Adjust margin if needed to match your layout
      },
    },
    // Alternatively, target admin-on-rest's specific FormToolbar component
    RaFormToolbar: {
      toolbar: {
        paddingLeft: 0,
      },
    },
  },
});

// Pass this theme to your Admin component
<Admin theme={customTheme} dataProvider={yourDataProvider}>
  {/* Your resources */}
</Admin>

方法2：自定义FormToolbar组件 #

If you only want to adjust the padding for specific forms (not all), create a custom toolbar component and replace the default one in your Edit/Create pages:

import { Toolbar } from '@material-ui/core';
import { SaveButton, DeleteButton } from 'admin-on-rest';

// Custom toolbar with no left padding
const CustomFormToolbar = ({ basePath, record, resource }) => (
  <Toolbar style={{ paddingLeft: 0 }}>
    <SaveButton basePath={basePath} record={record} />
    <DeleteButton basePath={basePath} record={record} resource={resource} />
    {/* Add any other buttons you need */}
  </Toolbar>
);

// Use it in your Edit component
export const CustomerEdit = (props) => (
  <Edit {...props} toolbar={<CustomFormToolbar />}>
    {/* Your form fields */}
    <TextInput source="name" />
    <TextInput source="email" />
  </Edit>
);

Admin-on-rest’s default Edit route follows the pattern /:resource/:id, but you can create custom edit pages without IDs in the URL (great for use cases like editing the current user’s profile or a single configuration record). Here are two approaches:

思路1：复用Edit组件，手动指定ID #

You can reuse the built-in Edit component by passing a fixed ID (or fetching it from your app state, like the current user’s ID) instead of relying on the URL parameter.

First, create a custom edit page that connects to Redux to get the record ID:

import { Edit, SimpleForm, TextInput } from 'admin-on-rest';
import { connect } from 'react-redux';

const ProfileEdit = ({ record, ...props }) => (
  // Pass the fetched record ID to the Edit component
  <Edit {...props} id={record.id} title="Edit Your Profile">
    <SimpleForm>
      <TextInput source="fullName" />
      <TextInput source="email" />
    </SimpleForm>
  </Edit>
);

// Map your app's state to get the current user's record
const mapStateToProps = (state) => ({
  record: state.admin.users.data[state.auth.currentUserId],
});

export default connect(mapStateToProps)(ProfileEdit);

Then add a custom route to your Admin component to map the ID-less URL to this page:

import { Admin, CustomRoutes } from 'admin-on-rest';
import { Route } from 'react-router-dom';
import ProfileEdit from './ProfileEdit';

const AppAdmin = () => (
  <Admin dataProvider={yourDataProvider}>
    {/* Your other resources */}
    <CustomRoutes>
      <Route path="/profile" component={ProfileEdit} />
    </CustomRoutes>
  </Admin>
);

思路2：完全自定义表单（更灵活） #

If you don’t want to use the Edit component at all, build a custom form that uses the dataProvider directly to fetch and update your record. This gives you full control over the URL and form behavior:

import { useState, useEffect } from 'react';
import { useDataProvider, useNotify, useRedirect } from 'admin-on-rest';
import { SimpleForm, TextInput, SaveButton } from 'admin-on-rest';

const ProfileForm = () => {
  const dataProvider = useDataProvider();
  const notify = useNotify();
  const redirect = useRedirect();
  const [record, setRecord] = useState(null);

  // Fetch the record on component mount (e.g., current user)
  useEffect(() => {
    dataProvider.getOne('users', { id: 'current' })
      .then(({ data }) => setRecord(data))
      .catch(() => notify('Failed to load profile', 'warning'));
  }, [dataProvider, notify]);

  // Handle form submission
  const handleSubmit = (values) => {
    dataProvider.update('users', { 
      id: record.id, 
      data: { ...record, ...values } 
    })
      .then(() => {
        notify('Profile updated successfully!');
        redirect('/dashboard');
      })
      .catch(() => notify('Failed to update profile', 'warning'));
  };

  if (!record) return <div>Loading...</div>;

  return (
    <SimpleForm initialValues={record} onSubmit={handleSubmit}>
      <TextInput source="fullName" />
      <TextInput source="email" />
      <SaveButton />
    </SimpleForm>
  );
};

// Add to custom routes
<Route path="/profile" component={ProfileForm} />

内容的提问来源于stack exchange，提问作者Marcel