如何使用：在materialui里面的js中的css中之前？

Question

我正在尝试在应用栏中应用“ before”。这段代码出了什么问题？

import { styled } from "@material-ui/styles";
import AppBar from "@material-ui/core/AppBar";

export const MyCustomAppBar = styled(AppBar)({
  background:
    "-moz-linear-gradient(left, rgba(155,155,155,1) 0%, rgba(214,214,214,0.48) 100%)",
  background:
    "-webkit-linear-gradient(left, rgba(155,155,155,1) 0%,rgba(214,214,214,0.48) 100%)",
  background:
    "linear-gradient(to right, rgba(155,155,155,1) 0%,rgba(214,214,214,0.48) 100%)",

  root: {
    "&::before": {
      content: "a",
      borderRadius: "100%",
      width: "150%",
      marginTop: "-40px",
      height: "121px",
      marginLeft: "-25%"
    }
  }
});

我尝试了几种方法来应用以前的方法，但在我看来有些局限性

Answer 1

我不相信（但不确定）样式化组件语法支持覆盖组件中的特定类（例如root），但是您可以执行以下操作：

export const MyCustomAppBar = styled(AppBar)({
  background:
    "-moz-linear-gradient(left, rgba(155,155,155,1) 0%, rgba(214,214,214,0.48) 100%)",
  background:
    "-webkit-linear-gradient(left, rgba(155,155,155,1) 0%,rgba(214,214,214,0.48) 100%)",
  background:
    "linear-gradient(to right, rgba(155,155,155,1) 0%,rgba(214,214,214,0.48) 100%)",

  "&::before": {
    content: '"hello"'
  }
});

尽管我不认为前两个“背景”条目有任何作用-我很确定它们会被第三个“王牌”击败。

我不清楚您尝试通过“之前”实现的效果，因此我更改了内容只是为了更轻松地表明语法有效。