react의 material ui에서 className에 여러 클래스를 지정하는 방법

react와 redux로 웹 사이트를 만드는 동안 material ui를 넣어 레이아웃을 수정하는 경우 참고
material ui 만진 초보자나, 실수하는 법 잊어버린 방향입니다.

className에 복수의 class를 지정하는 방법을 설명합니다.

「그것, 어떤 상황에서 일어난다」라고 생각한다고 생각하기 때문에,
MaterialUI의 AppBar 구성 요소 샘플 코드를 예로 들어 설명합니다.

material ui의 App Bar를 수정할 때 디폴트라고 아래 그림의 외형입니다.


material ui의 App Bar with buttons 코드 기본값

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

제목 : NEWS와 LOGIN의 색상을 분홍색으로 만들고 싶습니다.

App Bar News와 LOGIN의 색상을 동일하게 만들기 위해,
title에 색 정의를 추가합니다.

  title: {
    flexGrow: 1,
    color: 'pink',   <=追加
  },

그런 다음 LOGIN의 className에 title을 지정합니다.

<Button color="inherit" className={classes.title}>Login</Button>

색이 바뀌었지만, LOGIN이 왼쪽에 들러 버렸습니다 ...

title을 LOGIN 쪽에도 지정해 버리면 「flexGrow: 1」까지 LOGIN에 효과가 버립니다

NEWS와 LOGIN으로 class를 나누어 본다

  title: {
    flexGrow: 1,
    color: 'pink',
  },
  login: {
    color: 'pink',
  }

<Button color="inherit" className={classes.login}>Login</Button>

LOGIN이 오른쪽 끝으로 돌아왔습니다!

다만, 이대로라면 「color: 'pink'」의 정의가title와 login의 2개의 클래스 어느 쪽에도 쓰지 않으면 안 되는 상태가 되어 있어, 뒤의 것을 생각하면 공통화하고 싶다!

"title과 login"이라는 클래스 나누기가 아니라 "title과 headerColor"라는 클래스 나누기

  title: {
    flexGrow: 1,
  },
  headerColor: {
    color: 'pink',
  }

그리고 NEWS에는 title과 headerColor를 모두 지정하고 LOGIN에는 headerColor 만 지정합니다.

<Button color="inherit" className={classes.headerColor}>Login</Button>

LOGIN은 쉽습니다. 클래스명을 바꿀 뿐.

NEWS는 title과 headerColor를 모두 지정하므로 여기를 어떻게 쓰는지 드디어 본제입니다.

좋은 예 1

<Typography variant="h6" className={classes.title + classes.headerColor}>
 News
</Typography>

좋은 예 2

<Typography variant="h6" className={classes.title && classes.headerColor}>
 News
</Typography>

정답

<Typography variant="h6" className={classes.title + " " + classes.headerColor}>
 News
</Typography>

「2개의 클래스 사이에 반각 스페이스의 문자를 사이에 둔다」가 정답이었습니다.



최종 코드는 다음과 같습니다.

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  headerColor: {
    color: 'pink',
  }
}));

export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title + " " + classes.headerColor }>
            News
          </Typography>
          <Button color="inherit" className={classes.headerColor}>Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

글꼴 크기의 크기와 색상은
"root:"나 "menuButton:", "title:"아래에 계속해서 쓰면 OK입니다.
css 파일에서 쓰는 방법과 약간 다르므로주의하십시오.