margin='dense' doesn't actually make input field smaller

[mordechaim]

The top row uses Material UI's fields and the bottom are 2 ChipInputs. All fields have margin='dense' but the chip inputs' height are not the same as the top row.

I did manage to fix them by removing padding and margins but still, it should be aligned out-of-the-box.

Thanks

[leMaik]

It's aligned such that the chips fit inside the box by default without making the chips smaller. I didn't really check if it matches the size of other input fields.

[mordechaim]

Right, I had to make the chips smaller to fit my custom-styled input and did so with a custom chipRenderer. Perhaps using dense should automatically use small chips (with the size='small' prop), otherwise, it defeats the purpose of dense.

[tonyking97]

Any solution found? I need to match the size of chipInput to Textfield size small.

[mordechaim]

This is how I did it:

DenseChipInput.js

import React from 'react'
import ChipInput from 'material-ui-chip-input'
import { Chip } from '@material-ui/core'
import styles from './DenseChipInput.module.css'

export default function DenseChipInput(props) {
    return (
        <ChipInput
            classes={{
                label: styles['chip-input-label'],
                chip: styles['chip'],
                inputRoot: styles['chip-input-root'],
                input: styles['chip-input'],
                helperText: styles['helper-text']
            }}
            variant='outlined'
            margin='dense'
            chipRenderer={chipRenderer}
            {...props}
        />)
}

function chipRenderer({ text, handleDelete, isDisabled, className }, key) {

    const chipProps = {
        label: text,
        onDelete: handleDelete,
        disabled: isDisabled,
        className,
        key,
        size: 'small',
        variant: 'outlined'
    }

    return <Chip {...chipProps} />
}

DenseChipInput.module.css

/* For some unknown reason the default styles has higher specificity */

.chip-input-root {
    padding-top: 0 !important
}

.chip-input {
    margin-bottom: -4px !important
}

.chip-input-label {
    top: 0 !important
}

.chip {
    margin: 2px 8px 0 0 !important
}

.helper-text {
    margin-bottom: -7px
}