Блог

Я пытаюсь настроить a TreeView , добавив границу к каждому TreeItem .

В целом это отлично работает, моя текущая версия выглядит так:

Но я бы хотел, чтобы это выглядело так, и я понятия не имею, как его оформить:

Итак, в принципе, я хотел бы окружить только TreeItem метку <div> . У кого-нибудь есть идея, как я могу это решить?

Вы можете настроить таргетинг на MuiTreeItem-label имя класса при стилизации TreeItem . Для справки см. Список всех имен глобальных классов CSS здесь.

 import TreeItem, { treeItemClasses } from "@mui/lab/TreeItem";

const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
  [`amp; .${treeItemClasses.label}`]: {
    border: "solid blue 1px",
    borderRadius: theme.shape.borderRadius,
    marginTop: 3,
    marginBottom: 3
  }
}));