Material-ui: How to apply Card background and font color with custom theme palette color

[gebigoma]

<Card /> color doesn't change when using theme palette. Works when I just style in the styles const.

Also this works just fine with the <Button /> component.

The below works for the <Button /> component but doesn't affect the style for the <Card /> component

import React, { Component } from "react";
import PropTypes from "prop-types";
import {
  withStyles,
  MuiThemeProvider
} from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import Button from "@material-ui/core/Button";
import Theme from "../Theme";

const styles = theme => ({
  card: {
    backgroundColor: "primary"
  }
});

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={Theme}>
         <Card className={classes.card}>
            <CardActions>
                    <Button
                      variant="raised"
                      color="primary"
                      className={classes.primary}
                    >
                      DOWNLOAD TOOL
                    </Button>
                  </CardActions>
         </Card>
      </MuiThemeProvider>
    );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(App);

This works for the <Card /> component

import grey from "@material-ui/core/colors/grey";

const primary800 = grey["800"];

const styles = theme => ({
  card: {
    backgroundColor: primary800
  }
});

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={Theme}>
         <Card className={classes.card}>
            <CardActions>
                    <Button
                      variant="raised"
                      color="primary"
                      className={classes.primary}
                    >
                      DOWNLOAD TOOL
                    </Button>
                  </CardActions>
         </Card>
      </MuiThemeProvider>
    );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(App);

import { createMuiTheme } from "@material-ui/core/styles";
import grey from "@material-ui/core/colors/grey";

export default createMuiTheme({
  palette: {
    primary: {
      main: grey[800],
      contrastText: "#fff"
    },
    secondary: {
      main: grey[900],
      contrastText: "fff"
    }
  }
});

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[joshwooding]

const styles = theme => ({
  card: {
-    backgroundColor: "primary"
+   backgroundColor: theme.palette.primary.main
+   color: theme.palette.primary.contrastText
  }
});

Card is built on Paper so if you want to change it’s background you should change theme.palette.background.paper

[gebigoma]

@joshwooding Thanks so much! Background color is working - haven't managed to get the font color to change with that syntax and using the theme palette. Works with type: 'dark' or just adding a style, which isn't ideal since I'd like to use the theme palette for all colors.

[joshwooding]

@joshwooding Thanks so much! Background color is working - haven't managed to get the font color to change with that syntax and using the theme palette. Works with type: 'dark' or just adding a style, which isn't ideal since I'd like to use the theme palette for all colors.

Sorry typed that out on the train. I spelt color the British way 😅 I would suggest creating a StackOverflow question.

[gebigoma]

I spelt color the British way 😅

Yeah no I caught that 😀

I would suggest creating a StackOverflow question.

Heading over there now 👍

[sohaYounus97]

card border color?