时间戳

首页 > 解决方案 > 覆盖 Material UI 徽章样式不起作用

reactjs - 覆盖 Material UI 徽章样式不起作用

问题描述

我正在尝试Badge通过覆盖根 CSS 样式来翻译和定位组件，但由于某种原因，它没有任何效果。我的Card组件似乎通过className道具看到了样式，但由于某种原因，我的Badge组件没有看到任何东西。我正在关注这里的文档。

这是我的组件：

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);

标签： reactjsmaterial-ui

解决方案

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);

推荐阅读