Style Customization

[MattWilliamsDev]

There currently seems to be no easy way to edit the styles for the application. Part of this is due to the lack of traditional CSS classes, replaced by <Element style={ ... }>. It would be wonderful to have a simple way to edit the styles for various parts of the application without having to dig into source code.

If this is already feasible, then I would propose including instructions to do so within the docs as there is currently no mention of style changes.

[fzaninotto]

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

[MattWilliamsDev]

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.

[fzaninotto]

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

[MattWilliamsDev]

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?

[jpetitcolas]

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

[MattWilliamsDev]

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.

[MattWilliamsDev]

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

[MattWilliamsDev]

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?

[fzaninotto]

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

[MattWilliamsDev]

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

[MattWilliamsDev]

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

[fzaninotto]

No BC break, you can upgrade safely.

[MattWilliamsDev]

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

[MattWilliamsDev]

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?

[fzaninotto]

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?

[MattWilliamsDev]

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