Style Customization about react-admin HOT 16 CLOSED

Did you read http://marmelab.com/admin-on-rest/AdminResource.html#theme?

from react-admin.

I did not. I looked for it, but didn't come across it easily. I feared that I had possibly overlooked it within the docs, and would alternately propose possibly adding another level of items to the navigation within the docs to help those absent-minded devs like myself from overlooking this info.

I have also noticed since posting that the lack of CSS classes comes from material-ui itself.

from react-admin.

We need to add another chapter dedicated to theming. Now that you know how it works, would you like to bootstrap it?

from react-admin.

I'm not 100% sure what you mean by "bootstrap it". If you mean bootstrapping a custom theme into my implementation via the theme prop, then yes - I am working on that now. If you meant something else, could you please elaborate?

from react-admin.

@MattWilliamsDev: @fzaninotto meant bootstrapping the new chapter dedicated to theming.

from react-admin.

As in begin to write it? Sorry, but I seem unfamiliar with that usage of "bootstrap/bootstrapping". If so, I would be happy to once I get things working on my end.

Currently, using the theme prop on the Admin component isn't working for me.

const myTheme = {
    fontFamily: 'Roboto, sans-serif'
    , palette: {
        primary1Color: colors.orange2
        , primary2Color: darkBlack
        , primary3Color: colors.grey
        , accent1Color: colors.orange2
        , accent2Color: colors.ltGrey
        , accent3Color: colors.grey
        , textColor: darkBlack
        , secondaryTextColor: fade( darkBlack, 0.54 )
        , alternateTextColor: white
        , canvasColor: white
        , borderColor: colors.ltGrey
        , disabledColor: fade( darkBlack, 0.3 )
        , pickerHeaderColor: colors.orange2
        , clockCircleColor: fade( darkBlack, 0.07 )
        , shadowColor: fullBlack
    }
    , appBar: {
        backgroundColor: colors.orange2
        , color: darkBlack
    }
};

...

class App extends Component {
    render() {
        return (
            <Admin
                restClient={ RestClient }
                title="MyTitle"
                theme={ getMuiTheme( myTheme ) }
            >
                ...
            </Admin>
        );
    }
}

The theme doesn't seem to ever change. Still investigating what I'm doing incorrectly, as the theme data itself seems to be correct.

from react-admin.

It seems everything is being overwritten with the normal theme in spite of my addition of the theme prop.

from react-admin.

Investigating the Admin component in /src, I am not seeing where theme is ever accounted for and used. As an alternate method, I tried using the appLayout prop, but can't seem to be able to pass props into that correctly using the withAppTitle( ... )( ... ) method shown in the source.

This is from the Admin component:

const Admin = ({ restClient, dashboard, children, title = 'Admin on REST', appLayout = withAppTitle(title)(Layout) }) => {
    ...
};

Note how it doesn't seem to have any way of accounting for theme being passed in, nor does it do anything to pass the remaining props passed to Admin anywhere else down the chain. Is this a bug?

from react-admin.

Which version are you using? The theme is used at https://github.com/marmelab/admin-on-rest/blob/master/src/Admin.js#L15

from react-admin.

I'm using 0.3.1. I had just begun to think that was a possible issue.

from react-admin.

Are there any breaking changes or anything to know about before making a jump to 0.4.0?

from react-admin.

No BC break, you can upgrade safely.

from react-admin.

Thank you both for your assistance. Will close this issue once I verify it working in 0.4.0.

from react-admin.

Once I worked out the issue with NPM not installing peer dependencies (quill), the theme prop is working. Thanks again for the solid work and quick assistance.

What exactly is it you'd like me to do with the "bootstrapping" of the theming docs?

from react-admin.

Add a new Theming.md doc chapter, in which you can write the following headers:

• theming the admin (uses material UI themes, what you just did)
• overriding a component style (use the style attribute, and point to material ui doc to explain why)

Sounds feasible?

from react-admin.

Definitely sounds feasible. I will make the update sometime today (hopefully).

from react-admin.