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

Outlined variant styling issues #241

@mezzode

Description

@mezzode

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.

image

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,
  }}
/>

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions