0
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);

Как применить аттрибут clip-path к компоненту Start?:

 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 ответ 1

1

Достаточно дописать в стилях

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.