Material-ui: [Avatar] Support for color and backgroundColor

[atulmy]

Regarding v1.0.0-alpha.20,

The Avatars and other components does not have previously supported color and backgroundColor props

Do we always have to use StyleSheet for this or the support will be added in future?

[kgregory]

With Avatar specifically, color and backgroundColor are exposed through the colorDefault class, which can be overridden via the classes property.

Have a look at overriding with class names for more detail on how this can be implemented.

It seems that specific properties for individual aspects of a component's style are being eliminated, favoring the CSS class override approach, resulting in a cleaner API.

Anything further on this, @oliviertassinari?

[atulmy]

@kgregory thanks for your reply! Overriding with class names using stylesheet takes away the power of wonderful Color API. Also, it will result into increase in code size as well as maintainability.

[kgregory]

@atulmy not if you use jss-theme-reactor. Have you seen the way it is being used in the v1 source?

Here is an example from InsetList:

const styleSheet = createStyleSheet('InsetList', theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    background: theme.palette.background.paper,
  },
}));

You can render this stylesheet with the styleManager that MUI places on context and you'll have an object with attributes for each defined class.

// within the component
const { styleManager } = this.context;
const classes = styleManager.render(styleSheet);
// classes.root <-- this contains the real classname for the root class defined earlier

It is really useful and easy.

[oliviertassinari]

It depends on what color and backgroundColor property you want to set. As we are speaking, you could find on the code base the following possible values: primary, accent, default, contrast, inherit. For anything else, I think that Material-UI responsibility is to make overrides as easy as possible, with a normalized API.

[oliviertassinari]

It seems that specific properties for individual aspects of a component's style are being eliminated, favoring the CSS class override approach, resulting in a cleaner API.

@kgregory I can't agree more. As I pointed out before, the only color values we have are normalized and answer to specific Material-UI configurations.

[oliviertassinari]

@atulmy I had a look back at the source code of the Avatar and could think of a way to improve your concern. Thanks for raising that point.
I think that @kgregory answer it.

[atulmy]

Thanks for your help and great work on MUI @kgregory @oliviertassinari 🤘

[KaRkY]

How would I make it so color of avatar is dependent on content? Now I am generating classes for all material colors and then selecting color based on an calculation. Is there a better way?