Как использовать: прежде чем в CSS в JS внутри Materialui?

Question

Я пытаюсь применить ранее в панели приложений.Что не так с этим кодом?

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

Я не верю (но не уверен), что синтаксис styled-components поддерживает переопределение определенных классов (например, 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"'
  }
});

ХотяЯ не думаю, что первые две «фоновые» записи что-то делают - я почти уверен, что они будут превзойдены третьей.

Мне неясно, какого эффекта вы пытаетесь достичьВаше «до», поэтому я изменил содержимое, чтобы было проще показать, что синтаксис работает.