Как в MaterialUI применить класс к элементу Typography? - PullRequest
Новая
       49

Как в MaterialUI применить класс к элементу Typography?

0 голосов
/ 07 мая 2020

В моем компоненте 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» к моему элементу Typography следующим образом: 

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

Однако многоточие не отображается, а элемент упаковка

enter image description here

Что еще мне нужно сделать, чтобы применить стиль к моему элементу Typography?

1 Ответ

1 голос
/ 07 мая 2020

Ваш адресный класс должен быть добавлен к родительскому элементу компонента 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>
  );
}
...