Question

我试图在我的MUI按钮中获得诸如此类的结果- http://jsfiddle.net/bcGdJ/3160/

我结束了这个，但是before和after css选择器似乎都不起作用。

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

材质用户界面-如何在角落添加小三角形？

1 个答案: