Styling the chip input about material-ui-chip-input

[syntacticsugar]

I'll look into all this over the next few days, and get back with my updates, thank you!

[saschb2b]

The best option would be to support multiple styles via prop. The current styles prop only supports to override the root element.
We could introduce more style props like:

• style = root (the whole component. Already exists)
• inputStyle = style of the input (for example to make the font bigger)
• chipStyle = style of the chip (for example colored background)

This is also the way material-ui handles further styling.

Are there any more styling needs you want to achieve?

For further details see the style props for used components:

• Chips http://www.material-ui.com/#/components/chip
• Auto-Complete http://www.material-ui.com/#/components/auto-complete

[Sharlaan]

Additional infos that might of some interest :

<ChipInput
  name='Compétences'
  openOnFocus
  inputStyle={{ border: '1px solid green' }}
  textFieldStyle={{ border: '1px solid red' }}
/>

Somehow the border-color green gets overriden

Explanations:
ChipInput is based on MaterialUI's AutoComplete, which is itself composed of components TextField and Popover.
TextField exposes its inputStyle property to its parent (AutoComplete here).
textFieldStyle property comes from ChipInput to access styling the underlying TextField (but not the inner input element).

You can also find the default styles used by ChipInput author in the code source here.

As for inline styling CSS-in-JS, the 2 i've read the most about are Aphrodite and JSS.
Material-UI is based on JSS.
From my understanding, the main differences between the 2 is that JSS is more flexible than Aphrodite because it ignores IE9 limitation of 4k style sheets max. So if your product might get more than this limitation, go for Aphrodite, otherwise JSS all the way.

Hope it helps.

[leMaik]

@syntacticsugar @saschb2b I wanted to at first, but then I didn't implement a chipStyle property. It is even more flexible by allowing to specify a chipRenderer.

A function of the type ({ value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => node that returns a chip based on the given properties. This can be used to customize chip styles.

Example (from the stories):

<ChipInput
  defaultValue={['foo', 'bar']}
  fullWidth
  chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => (
    <Chip
      key={key}
      style={{ margin: '8px 8px 0 0', float: 'left', pointerEvents: isDisabled ? 'none' : undefined }}
      backgroundColor={isFocused ? green800 : green300}
      onTouchTap={handleClick}
      onRequestDelete={handleRequestDelete}
    >
      <Avatar size={32}>{value[0].toUpperCase()}</Avatar>
      {value}
    </Chip>
  )}
/>

You can use this to create any chip style you want, e.g. chips with avatars. And when #9 is done, it's even more powerful. :)