在 MaterialUI 中，如何将 class 应用于我的 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",
    },
  }

然后我将 "address" class 应用于我的 Typography 元素，就像这样

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

但是，省略号没有出现，元素在换行

我还需要做什么才能将样式应用到我的 Typography 元素？

Answer 1

您的地址 class 应添加到 Typography 组件的父级，否则样式链接将不起作用。

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

意思是在地址class中找到一个class.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>
  );
}

在 MaterialUI 中，如何将 class 应用于我的 Typography 元素？

In MaterialUI, how do I apply a class to my Typography element?

css

styles

typography

overflow

material-ui