feat: sx prop for custom dropdown
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FormControl, InputLabel, Select } from "@mui/material";
|
import { FormControl, InputLabel, Select } from "@mui/material";
|
||||||
import { SelectChangeEvent } from "@mui/material/Select/Select";
|
import { SelectChangeEvent } from "@mui/material/Select/Select";
|
||||||
|
import { SxProps } from '@mui/system';
|
||||||
|
|
||||||
interface DropdownProps {
|
interface DropdownProps {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -8,9 +9,10 @@ interface DropdownProps {
|
|||||||
value: string | undefined;
|
value: string | undefined;
|
||||||
handleSelect: (event: SelectChangeEvent) => void;
|
handleSelect: (event: SelectChangeEvent) => void;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
|
sx?: SxProps;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Dropdown = ({ id, label, value, handleSelect, children }: DropdownProps) => {
|
export const Dropdown = ({ id, label, value, handleSelect, children, sx }: DropdownProps) => {
|
||||||
return (
|
return (
|
||||||
<FormControl sx={{ minWidth: 120 }} size="small">
|
<FormControl sx={{ minWidth: 120 }} size="small">
|
||||||
<InputLabel id={id}>{label}</InputLabel>
|
<InputLabel id={id}>{label}</InputLabel>
|
||||||
@@ -21,6 +23,7 @@ export const Dropdown = ({ id, label, value, handleSelect, children }: DropdownP
|
|||||||
label={label}
|
label={label}
|
||||||
onChange={handleSelect}
|
onChange={handleSelect}
|
||||||
size='small'
|
size='small'
|
||||||
|
sx={sx}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</Select>
|
</Select>
|
||||||
|
|||||||
Reference in New Issue
Block a user