在MaterialUI中，我如何应用一个类到我的Typography元素？

Question

在我的Material-UI组件中，我想在我的Typography元素溢出时创建一个省略号。 我创建了这些样式...

const styles = (theme) => ({
  root: {
    textAlign: "left",
    margin: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    color: theme.color.secondary,
  },
  cardHeader: {
    paddingBottom: theme.spacing(0),
  },
  cardContent: {
    paddingBottom: theme.spacing(1),
  },
  rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    display: "flex",
  },
  halfRow: {
    width: "50%",
  },
  address: {
    "& .MuiTypography-h5": {
      textOverflow: "ellipsis",
      overflow: "hidden",
    },
  }

然后我把 "地址 "类应用到我的Typography元素中，就像这样。

            <Typography variant="h5" className={classes.address}>
              <a href={`https://www.google.com/maps/dir/"${location}"`}>{location}</a>
            </Typography>

但是，省略号没有出现，元素被包裹起来了。

我还需要做什么来为我的Typography元素应用一个样式？

Answer 1

你的地址类应该被添加到Typography组件的父类中，否则样式链将无法工作。

address: {
    "& .MuiTypography-h5": {
      textOverflow: "ellipsis",
      overflow: "hidden",
    },
  }

这意味着在地址类里面找到一个.MuiTypography-h5类，然后应用样式，但没有任何样式。

另外我建议你使用makeStyles来创建样式。

const styles = makeStyles(theme => ({
  address: {
    "& .MuiTypography-h5": {
      textOverflow: "ellipsis",
      overflow: "hidden"
    }
  }
}));
export default function App() {
  const classes = styles();
  return (
    <div className={classes.address}>
      <Typography variant="h5">
        126 Phillips Key Suite 042 West Kentucky
      </Typography>
    </div>
  );
}