Theming

React-admin applications use a neutral style by default. You will probably want to customize the look and feel to match your branding, or your end users preferences. Don’t worry! You can customize the look and feel of pretty much everything in react-admin.

Styling Individual Components

If you need to adjust the style of a single component, you can use the sx prop. It works like React’s style prop, but is much more powerful. It relies on a CSS-in-JS library bundled with Material UI.

The following example shows how to change the color, decoration, width, and font weight of a <Datagrid> column:

Default style	Styled with sx

import { Datagrid, TextField, List, DateField, ReferenceManyCount, BooleanField } from 'react-admin';

const PostList = () => (
    <List>
        <Datagrid
            sx={{
                '& .column-title': {
                    maxWidth: '16em',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                },
                '& .column-commentable': {
                    maxWidth: '4em',
                },
            }}
        >
            <TextField source="id" sx={{ color: 'text.disabled' }} />
            <TextField source="title" />
            <DateField source="published_at" label="Published"/>
            <ReferenceManyCount
                label="Comments"
                reference="comments"
                target="post_id"
                link
                sx={{ color: 'inherit', fontWeight: 'bold' }}
            />
            <BooleanField
                source="commentable"
                label="Com."
                sortable={false}
                sx={{ '& .RaBooleanField-falseIcon': { visibility: 'hidden' } }}
            />
        </Datagrid>
    </List>
);

The sx prop supports all the CSS features you need to style your components, including media queries, pseudo-classes, nesting, and more. Check the dedicated sx chapter for more information.

App-Wide Theming

If you need to customize the look and feel of the whole application, you can use the theme prop of the <Admin> component. It accepts a theme object, which is a plain JavaScript object with a specific structure. You can either create your own theme object, or extend the default theme object provided by react-admin.

Default style	Styled with theme

import { Admin, defaultTheme } from 'react-admin';
import indigo from '@mui/material/colors/indigo';
import pink from '@mui/material/colors/pink';
import red from '@mui/material/colors/red';

const myTheme = {
    ...defaultTheme,
    palette: {
        mode: 'dark',
        primary: indigo,
        secondary: pink,
        error: red,
    },
    typography: {
        // Use the system font instead of the default Roboto font.
        fontFamily: [
            '-apple-system',
            'BlinkMacSystemFont',
            '"Segoe UI"',
            'Arial',
            'sans-serif',
        ].join(','),
    },
    components: {
        ...defaultTheme.components,
        MuiTextField: {
            defaultProps: {
                variant: 'outlined' as const,
            },
        },
        MuiFormControl: {
            defaultProps: {
                variant: 'outlined' as const,
            },
        },
    },
};

const App = () => (
    <Admin theme={theme}>
        // ...
    </Admin>
);

React-admin comes with 4 built-in themes: Default, Nano, Radiant, and House. The e-commerce demo contains a theme switcher, so you can test them in a real application.

The application theme lets you customize color, typography, spacing, and component defaults. Check the dedicated Application Theme chapter for more information.

Customizing The Page Layout

React-admin provides 3 built-in layout components, and you can easily create your own.

For instance, you can replace the default <Layout>, which uses a sidebar for navigation, with a <ContainerLayout>, which uses a top bar instead.

import { Admin, Resource } from 'react-admin';
import { ContainerLayout } from '@react-admin/ra-navigation';

export const App = () => (
    <Admin dataProvider={dataProvider} layout={ContainerLayout}>
        <Resource name="songs" list={SongList} />
        <Resource name="artists" list={ArtistList} />
    </Admin>
);

You can even write your own layout component from scratch. Check the dedicated Layout chapter for more information.

Customizing Page Elements

Here is a list of the most common UI elements you may want to customize, and the props you can use to do so:

Material-Ui Components For Theming

Material-ui is a rich UI library, so you may not know all its components. There are 3 components you should know about when theming react-admin:

• <Box>: a generic container component, which can be used to add padding, margin, and background color to any component. It is used extensively in react-admin, and you will probably use it a lot too.
• <Stack>: a component to stack elements vertically or horizontally.
• <Grid>: a component to display elements in a grid.

We’ve summarized the most important props of these components in a dedicated documentation: <Box>, <Stack> and <Grid>. You should definitely read it.