How do I customize components as part of the theme? (border radius, gradients, font family, etc)

• I have searched the issues of this repository and believe that this is not a duplicate.

Hello, I’m trying to brand an app we are working on that was made with Admin on Rest and Material UI. I’ve been reading through the Material UI docs and have been trying to put together a theme but I’m having difficulty adjusting certain styles.

I’ve been using this as a reference but it seems to be missing many properties/properties aren’t working when I add them https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js

Here are a few of the things I’m trying to do but can’t figure out how:

• Make the background color of buttons a gradient
• Add a border radius to buttons
• Use a different font for titles and the AppBar

This is an example from my theme.js file:

{
  appBar: {
    fontFamily: 'Karla, sans-serif',
    titleFontWeight: 800,
  },
  button: {
    background: 'linear-gradient(0deg, red, blue)',
    borderRadius: '50px'  
  }
}

Certain things work like the titleFontWeight but not others like fontFamily (I tried titleFontFamily as well).

I must be missing something because I couldn’t find a way to do these in the docs, could someone please point me in the right direction?

Thanks!

[dandv]

Try: https://material-ui-next.com/customization/themes/ specifically: https://material-ui-next.com/customization/themes/#customizing-all-instances-of-a-component-type

I’m also looking for this. I think the current link for the “all instances” use case is now https://material-ui.com/customization/components/#5-global-theme-variation

[jordanranson]

@mbrookes Thanks for the reply. I’ll move this discussion to the Admin on Rest repository to see when they’re planning on upgrading.