4

I am trying to make a dark-themed React frontend that uses Material guidelines. According to dark theme specifications, surfaces should be lightened with each elevation level. This doesn't seem to work with the elevation property in material-ui's Paper component, it seems to only add a shadow. I am wondering if this specification is already implemented, or what the best solution would be for having this effect.

Example:

<Paper elevation={1}>
    <Typography variant="h6">Paper1</Typography>
</Paper>
<Paper elevation={5}>
    <Typography variant="h6">Paper2</Typography>
</Paper>

This two papers have different elevations, but still have the same background color.

2
  • Can you, please, add code example of what you've done? Jun 23, 2020 at 13:06
  • I added some example code, hopefully it is enough to show the issue
    – Bluskript
    Jun 23, 2020 at 20:58

1 Answer 1

1

Just ran into the same problem. Seems like material-ui does implement elevation only by adding the box shadow. A quick solution I came up with (typescript):

import { lighten, makeStyles, Paper, Theme } from "@material-ui/core";
import React from "react";

const useStyles = makeStyles<Theme, { elevation: number }>((theme) => ({
  paper: {
    boxShadow: (props) => theme.shadows[props.elevation],
    backgroundColor: (props) =>
      lighten(theme.palette.background.paper, props.elevation * 0.025),
  },
}));


export const CustomPaper: React.FC<{elevation: number}> = ({ children, elevation }) => {
  const classes = useStyles({ elevation });
  return (
    <Paper className={classes.paper}>
      {children}
    </Paper>
  );
};

I find that the factor 0.025 produces a decent look. However, I came up with it just by a bit of trial and error. There may be more sophisticated approaches.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.