material ui 활용

sx 객체를 지정할 때 나는 단순 코드를 문자열로 짰다.
하지만 함수형으로 지정할 수 있어서 기록하고자 한다.

  const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba } }) => ({
    color: () => {
      let colorValue = light || darkMode ? white.main : dark.main;

      if (transparentNavbar && !light) {
        colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
      }

      return colorValue;
    },
    width: "10rem",
    height: "10rem",
    fontSize: "10rem",
    border: "1px solid black",
  });

color의 다크모드, 화이트모드를 지정하기 위해 화살표 함수로 기능구현까지 했다.
참고하자.