This repository was archived by the owner on Dec 23, 2022. It is now read-only.

Description
There are some style issues when using the outlined variant.
fullWidth doesn't work. It appears to be applying width: 100% to the wrong node meaning that the input itself isn't full width.
- Label is not vertically aligned when using
dense margin. With the dense margin, the label is 2px offset.

Currently I'm working around the issue by overriding the styles:
const styles = createStyles({
// chipInput works around fullWidth bug with outlined variant ChipInput
chipInput: {
width: '100%',
},
// chipLabel and chipLabelShrink work around label vertical alignment bug
// with dense margin ChipInput
chipLabel: {
'&:not($chipLabelShrink)': {
top: '-2px !important',
},
top: '2px !important',
},
chipLabelShrink: {
top: '0px !important',
},
});
...
<ChipInput fullWidth={true} margin="dense" classes={{
inputRoot: classes.chipInput,
label: classes.chipLabel,
labelShrink: classes.chipLabelShrink,
}}
/>