Material-ui: [Badge] Support other theme colors

[camdagr8]

Expected Behavior

When supplying the color attribute, you should be able to use any of the colors supplied in the theme.palette

Current Behavior

Only: default/primary/accent are supported.

Your Environment

| Tech | Version |
|:--------------|:---------|
| Material-UI | v1.0.0-beta.23 |

[papasnippy]

Type 'string' is not assignable to type '"disabled" | "inherit" | "primary" | "accent" | "default" | "contrast" | "action" | "error"'.

Forbidding using any color is really bad. It limits using this library. I not always need pure colors, I need gradients too. I even can't use color from official palettes.

[lunarmoon26]

Exactly, I checked their code on AppBar.js, RaisedButton.js, etc. and discovered they use "backgroundColor" as the CSS property to set the primary and accent color to the background. Since gradient won't work with background-color, the .js code probably can be changed to just "background"...

My theming is as below (and this won't work):

const muiTheme = getMuiTheme({
...
raisedButton:{
  primaryColor: 'linear-gradient(to top right, #1D3475, #060D1F)',
  secondaryColor: 'linear-gradient(to top right, #ffaf4b,#ff920a)',
},
appBar: {
  color: 'linear-gradient(to top right, #1D3475, #060D1F)',
},
...
});

[t49tran]

@lunarmoon26, I think at the moment colour prop is a palette colour option, which means it doesn't support linear-gradient or radial-gradient. However, if you want to use these css functions, you can always override the badge class of the Badge component. For example:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Badge from 'material-ui/Badge';
import MailIcon from 'material-ui-icons/Mail';

const styles = theme => ({
  badge: {
    margin: `0 ${theme.spacing.unit * 2}px`,
    background: `radial-gradient(circle at center, red 0, blue, green 100%)`
  },
});

function SimpleBadge({classes}) {
  return (
      <Badge classes={{badge: classes.badge}} badgeContent={4} color="primary">
        <MailIcon />
      </Badge>
  );
}

SimpleBadge.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleBadge);

[mbrookes]

lunarmoon26 You can also apply it globally https://material-ui-next.com/customization/overrides#4-global-theme-variation (like you were trying to do, but you missed a step).

@oliviertassinari Any reason for us not to change all instances of backgroundColor to background?

[oliviertassinari]

@mbrookes background is a composed property. backgroundColor should help with overrides.
I have recently migrated all the background occurrences.

[mbrookes]

i.e. you can override backgroundColor with backgroundColor or background, but you can only override background with background.

[oliviertassinari]

We now support primary / secondary / error. I don't think that we should add more color to the component. Instead, I think that we should look into providing a <Color /> component for advanced use cases.

[simonbw]

Is there currently any way to have a Badge with dynamically set color? I know that I can create a badge component with a custom color like this:

import { Badge, withStyles } from 'material-ui';
const RedBadge = withStyles(() => ({ badge: { backgroundColor: '#F00' } }))(Badge);

// Or even a bit more dynamically
const createColoredBadge = (color) =>
  withStyles(() => ({ badge: { backgroundColor: color } }))(Badge);
const GreenBadge = createColoredBadge('#0F0');
const BlueBadge = createColoredBadge('#00F');

But I'd still have to define a new component for every color of badge I want. Is there some way I can create a ColoredBadge component that I could use like this?

<ColoredBadge bgColor={color}/>

[t49tran]

@simonbw , to be able to do that you need a library that provides a HOC that allow props in your style as withStyles doesn't support it.

Something like react-jss, styled-component or emotion will help.

[joshwooding]

@oliviertassinari I think this can be closed now that @material-ui/styles is out. I think it might relate to #13875 too

[mbrookes]

I think it might relate to #13875

And to #14185 - not sure which dupe to close... 🤔

[eps1lon]

I think it might relate to #13875

And to #14185 - not sure which dupe to close...

Almost. Closing this in favor of #13875

[patorjk]

In case anyone comes across this and wants to change the color, here's how to use makeStyles from @material-ui/styles to change the color:

import {makeStyles} from "@material-ui/styles";

const useStyles = makeStyles(theme => ({
    badge: {
        backgroundColor: "green",
    }
}));

... // Then later in your render method or in your component function

const classes = useStyles();

... // Then later in your JSX

<Badge badgeContent="100" classes={{badge: classes.badge}}>
    <SomeIcon />
</Badge>

[Irenyak1]

Man @patorjk you are the best. you have saved my head.