React Material - withStyles로 TreeView css 커스터마이징 하기 (Customize TreeView css Style using withStyles)

리액트 전체 링크

 

참고

- mui tree view css

- Mui Tree View로 파일, 폴더 뷰 만들기

 

TreeView의 css 스타일을 변경해보자.

 

현재 코드는 아래와 같다.

import React from "react";

import TreeView from "@mui/lab/TreeView";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import TreeItem from "@mui/lab/TreeItem";

const TreeViewExample = () => {
  return (
    <div>
      <TreeView
        aria-label="file system navigator"
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        disabledItemsFocusable={true}
        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      >
        <TreeItem
          nodeId="1"
          label="Applications"
          onClick={(e) => console.log(e.target.innerText)}
        >
          <TreeItem nodeId="2" label="Calendar" />
        </TreeItem>
        <TreeItem nodeId="5" label="Documents">
          <TreeItem nodeId="10" label="OSS" />
          <TreeItem nodeId="6" label="MUI" disabled={true}>
            <TreeItem nodeId="8" label="index.js" />
          </TreeItem>
        </TreeItem>
      </TreeView>
    </div>
  );
};

export default TreeViewExample;

---

withStyles 적용하기

 

withStyles을 이용하면 css를 customizing 할 수 있다.

npm install @mui/styles
or
npm install @mui/styles --legacy-peer-deps

 

링크를 참고하자.

 

먼저 아래와 같이 withStyles를 적용한다.

import TreeItem from "@mui/lab/TreeItem";
import { withStyles } from "@mui/styles";

const MyTreeItem = withStyles({
  root: {
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover": {
      background: "blue",
    },
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover > .MuiTreeItem-label": {
      background: "skyblue",
    },
    "&.MuiTreeItem-root > .Mui-selected": {
      background: "grey",
    },
    "@media (hover: none)": {
      backgroundColor: "transparent",
    },
  },
})(TreeItem);

 

그리고 TreeItem을 모두 MyTreeItem으로 변경하면 아래와 같이 css가 변경된다.

 

 

전체 코드는 다음과 같다.

import React from "react";

import TreeView from "@mui/lab/TreeView";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";

import TreeItem from "@mui/lab/TreeItem";
import { withStyles } from "@mui/styles";

const MyTreeItem = withStyles({
  root: {
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover": {
      background: "blue",
    },
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover > .MuiTreeItem-label": {
      background: "skyblue",
    },
    "&.MuiTreeItem-root > .Mui-selected": {
      background: "grey",
    },
    "@media (hover: none)": {
      backgroundColor: "transparent",
    },
  },
})(TreeItem);

const TreeViewExample = () => {
  return (
    <div>
      <TreeView
        aria-label="file system navigator"
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        disabledItemsFocusable={true}
        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      >
        <MyTreeItem
          nodeId="1"
          label="Applications"
          onClick={(e) => console.log(e.target.innerText)}
        >
          <MyTreeItem nodeId="2" label="Calendar" />
        </MyTreeItem>
        <MyTreeItem nodeId="5" label="Documents">
          <MyTreeItem nodeId="10" label="OSS" />
          <MyTreeItem nodeId="6" label="MUI" disabled={true}>
            <MyTreeItem nodeId="8" label="index.js" />
          </MyTreeItem>
        </MyTreeItem>
      </TreeView>
    </div>
  );
};

export default TreeViewExample;