hc-oss / react-tag-input-component

lightweight react component for tag(s) input
https://codesandbox.io/s/react-tag-input-component-rgf97
MIT License
80 stars 36 forks source link

Add className to props #38

Open samfirminger opened 1 year ago

samfirminger commented 1 year ago

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.

coreyward commented 1 year ago

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}
  />
)
stephenbaek commented 1 year ago

@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!