import React from "react"; import { withStyles } from "material-ui-next/styles"; const styles = { star: { cursor: "pointer", height: 25, width: 25, margin: 2, float: "left", backgroundColor: "grey" } }; const Star = ({ selected, classes }) => { return <div className={classes.star}>message</div>; }; export default withStyles(styles)(Star);

How to apply the clip-path attribute to the Start component ?:

  clip-path: polygon( 50 0 %, 63 % 38 %, 100 % 38 %, 69 % 59 %, 82 % 100 %, 50 % 75 %, 18 % 100 %, 31 % 59 %, 0 % 38 %, 37 % 38 % )},

https://codesandbox.io/s/pyqn4mk9y0

    1 answer 1

    Enough to add styles

    clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);'

     import React from "react"; import { withStyles } from "material-ui-next/styles"; const styles = { star: { cursor: "pointer", height: 25, width: 25, margin: 2, float: "left", backgroundColor: "grey", clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);` } }; const Star = ({ selected, classes }) => { return <div className={classes.star}>message</div>; }; export default withStyles(styles)(Star);

    https://codesandbox.io/s/xj6kl970rp