material-design - Material ui - 我将如何在角落添加小三角形？

Question

我试图在我的 MUI 按钮中获得这样的结果 - http://jsfiddle.net/bcGdJ/3160/

我最终得到了这个，但似乎before和aftercss 选择器都不起作用。

import React from "react";
import Button from "@material-ui/core/Button";
import Notifications from "@material-ui/icons/Notifications";
import "./box.css";

const styles = {
    color: 'purple',
    backgroundColor: 'gray',
    minWidth: '40px',
    minHeight: '40px',
    borderRadius: 1,
    position: "relative",
    "&:before,&:after": {
      content: '',
      position: "absolute",
      bottom: 0,
      left: 0,
      borderColor: "transparent",
      borderStyle: "solid"
    },
    "&:before": {
      borderWidth: "8px",
      borderLeftColor: "#efefef",
      borderBottomColor: "#efefef",
    },
     "&:after": {
      borderRadius: "3px",
      borderWidth: "5px",
      borderLeftColor: "#fff", /* color of the triangle */
      borderBottomColor: "#fff" /* color of the triangle */
    }
  };

function CustomizedInputs(props) {
  return (
    <div id="container">
      <Button color="primary" style={styles}>
        <Notifications />
      </Button>
    </div>
  );
}

export default CustomizedInputs;

```

https://codesandbox.io/s/72jyr75461

任何帮助，将不胜感激

标签： material-designmaterial-ui

Answer 1

你的代码很好，但你错过了一些简单的点。

您需要使用content: "''"而不是content: "".

您需要使用::而不是:forbefore和after。

  cssRoot: {
    color: theme.palette.getContrastText(purple[500]),
    backgroundColor: purple[200],
    minWidth: "40px",
    minHeight: "40px",
    borderRadius: 1,
    position: "relative",
    "&::before,&::after": {
      content: "''",
      position: "absolute",
      bottom: 0,
      left: 0,
      borderColor: "transparent",
      borderStyle: "solid"
    },
    "&::before": {
      borderWidth: "8px",
      borderLeftColor: "#efefef",
      borderBottomColor: "#efefef"
    },
    "&::after": {
      borderRadius: "3px",
      borderWidth: "5px",
      borderLeftColor: "#fffff" /* color of the triangle */,
      borderBottomColor: "#fffff" /* color of the triangle */
    }
  }

https://codesandbox.io/s/541v247qlp