Skip to content

Mui:ButtonGroup

RoundedButtonGroup

코너가 둥근 버튼 그룹 만드는 방법: 

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import {createTheme, ThemeProvider} from '@mui/material/styles';

const greyRoundedTheme = createTheme({
  shape: {
    borderRadius: 24,
  },
  palette: {
    secondary: {
      main: grey[700],
    },
  },
});

// ...

return (
  <ThemeProvider theme={greyRoundedTheme}>
    <ButtonGroup
      sx={{marginLeft: 1, borderRadius: 6}}
      size="small"
      color="secondary"
      variant="outlined"
    >
      <Button>1개월</Button>
      <Button>1주일</Button>
      <Button>오늘</Button>
    </ButtonGroup>
  </ThemeProvider>
);

See also