Styling the chip input

[syntacticsugar]

Hello! I'm kind of new to inline styling in React. Specifically, for components that create nested divs without classes (and instead of inline styles) that I cannot access from the code I use to create that component.

For example, among other things, I'd like to increase the size of the input text as shown:

I only managed to do so as shown above, but inspecting element and manually typing it in the Developer Tools bar :

This div was nested several divs deep. Naturally, if it had some sort of class attached, I'd be able to go into my CSS/LESS file and style it, but inside my project JS file, I only have:

I saw in your Readme/documentation that the style property can take an object (ex style={ { backgroundColor: silver } }), but how do I target individually nested divs?

Because after I increase the font-size of the input text, I also need to style the chips' background colors, etc.

Thank you so much! I would appreciate being pointed in the right direction at least. Sorry if this is such a basic question, but I did Google 'react js inline styles', found some library called Radium, but am not sure if this is the best way to go about it.

[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. :)

[syntacticsugar]

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