/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';
import { CheckboxProps, Checkbox } from '@material-ui/core';
import { ThemeObject } from '../Theme';

export const StyledCheckBox = styled((props: CheckboxProps & { $theme: ThemeObject; $color: keyof ThemeObject['pallet'] }) => (
  <Checkbox {...props} />
))`
  && {
    .MuiCheckbox-colorSecondary {
      color: ${(props) => props.$theme.pallet.gray20};
      transition: all 0.25s;
    }
  }
`;
