Next.jsでMaterialUI利用するフロントエンド開発メモ
やってみたらできたのでメモ。。
コンポーネントのオーバーライド
スライダーのthumbと背景の大きさ変更した際のソースコード
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 }}