材料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

如有任何帮助，将不胜感激

Answer 1

您的代码很好，但您遗漏了一些要点。

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

对于before和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