CSS

Like any component, if you want to override a component's styles using custom classes, you can use the className prop.

<MuiChipsInput className="my-class-name" />

Then, you can use the differents global class names (see below) to target an element of MuiChipsInput.

Global class	Description
.MuiChipsInput-TextField	Styles applied to the root element.
.MuiChipsInput-Chip	Styles applied to the Chip component.
.MuiChipsInput-Chip-Editing	Styles applied to the Chip component when user is editing it.

For example: target the .MuiChipsInput-Chip global class name to customize all chips.

Example with styled-component / emotion

import { styled } from 'styled-component' // or emotion
import { MuiChipsInput } from 'mui-chips-input'

const MuiChipsInputStyled = styled(MuiChipsInput)`
  & input {
    color: red;
  }
`

function MyComponent() {
  return <MuiChipsInputStyled />
}