Next.js에서 MaterialUI 사용하는 프런트 엔드 개발 메모

구성 요소 재정의

import React from 'react';
import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles(theme => ({
  thumb: {
    width: 24,
    height: 24,
    marginTop: -9,
    borderStyle: "solid",
    borderWidth: 3,
    borderColor: "#ffffff",
    boxSizing: "content",
  },
  rail: { height: 6, },
}));

export default function Test() {
  const classes = useStyles();
  return (
    <Box>
      <Slider
        aria-label="custom thumb label"
        defaultValue={50}
        disabled
      />
      <Slider
        ThumbComponen={<span className={classes.thumb} />}
        aria-label="custom thumb label"
        defaultValue={50}
        classes={{ rail: classes.rail, track: classes.rail, thumb: classes.thumb }}
      />
    </Box>
  );
}

classes={{ rail: classes.rail, track: classes.rail, thumb: classes.thumb }}

참고 사이트