react-tag-input-component icon indicating copy to clipboard operation
react-tag-input-component copied to clipboard

Add className to props

Open samfirminger opened this issue 3 years ago • 3 comments
trafficstars

When working with styled-components, in order to override styles of a third party component, the third party component needs to accept className. See here. Without this, it makes it very hard to use this library, which is a shame because it's lightweight and exactly what I need.

samfirminger avatar Nov 17 '22 15:11 samfirminger

You could create a simple wrapper component to make this work. Something like this:

const StyledTagInput = ({ className, ...rest }) => (
  <TagsInput
    classNames={{
      tag: className, // or input: className
    }}
    {...rest}
  />
)

coreyward avatar Dec 10 '22 18:12 coreyward

@coreyward Your code works like a charm! Thanks! One follow-up question: how would you change the style of the container? For some reason, I'm seeing some ugly border of the "rti--container" and I want to get rid of it. Any help would be appreciated!

stephenbaek avatar Jul 20 '23 03:07 stephenbaek