Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

48 lines
1.1 KiB

import {
InputLabel as MUIInputLabel,
inputLabelClasses as muiInputLabelClasses,
InputLabelProps as MUIInputLabelProps,
} from '@mui/material';
import { BLACK, BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME';
type OutlinedInputLabelProps = MUIInputLabelProps;
const OutlinedInputLabel = (
inputLabelProps: OutlinedInputLabelProps,
): JSX.Element => {
const { children, sx } = inputLabelProps;
const combinedSx = {
color: GREY,
[`&.${muiInputLabelClasses.focused}`]: {
backgroundColor: GREY,
borderRadius: BORDER_RADIUS,
color: BLACK,
padding: '.1em .6em',
},
...sx,
};
return (
<MUIInputLabel
// eslint-disable-next-line react/jsx-props-no-spreading
{...{
// 1. Specify default props.
variant: 'outlined',
// 2. Override defaults with given props.
...inputLabelProps,
// 3. Combine the default and given for props that can be both extended or override.
sx: combinedSx,
}}
>
{children}
</MUIInputLabel>
);
};
export type { OutlinedInputLabelProps };
export default OutlinedInputLabel;