Question

我正在尝试通过覆盖根CSS样式来翻译和定位Badge组件，但是由于某些原因，它没有任何作用。我的Card组件似乎通过className道具看到了样式，但是由于某种原因，我Badge组件什么也没看到。我正在关注文档here。

这是我的组成部分：

import React, { useState } from "react";
import PropTypes from "prop-types";

import Card from "@material-ui/core/Card";
import { Badge } from "@material-ui/core";
import CardHeader from "@material-ui/core/CardHeader";
import { makeStyles } from "@material-ui/core/styles";


const useStyles = makeStyles(theme => ({
  root: {
    anchorOriginTopRightRectangle: {
      transform: "translate(-100%, -50%)"
    }
  },
  card: {
    maxWidth: 345
  },
}));

const CardItem = ({
  name,
  discount
}) => {
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <CardHeader
        title={
            <>
                {name}
                <Badge
                badgeContent={`-10%`}
                color="error"
                ></Badge>
            </>
        }
        subheader={"$1234"}
      />
        // ... Card content
    </Card>
  );
};

export default(CardItem);

Answer 1

import React, { useState } from "react";
import PropTypes from "prop-types";

import Card from "@material-ui/core/Card";
import { Badge } from "@material-ui/core";
import CardHeader from "@material-ui/core/CardHeader";
import { makeStyles } from "@material-ui/core/styles";


const useStyles = makeStyles(theme => ({
  anchorTopRight: {
      transform: "translate(-100%, -50%)"
  },
  card: {
    maxWidth: 345
  },
}));

const CardItem = ({
  name,
  discount
}) => {
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <CardHeader
        title={
            <>
                {name}
                <Badge
                classes={{ anchorOriginTopRightRectangle: classes.anchorTopRight}} // <== Working Code
                badgeContent={`-10%`}
                color="error"
                ></Badge>
            </>
        }
        subheader={"$1234"}
      />
        // ... Card content
    </Card>
  );
};

export default(CardItem);

覆盖Material UI Badge样式不起作用

1 个答案: